Cách sử dụng đường viền (border) trong CSS

Đường viền là yếu tố gây nổi bật khá quan trọng – nó tạo ranh giới với những phần còn lại của trang web. Hôm nay chúng ta cùng xem thử CSS làm được những gì với đường viền.

Tạo đường viền

Ba thuộc tính quan trọng của đường viền đó là:

  • Kích thước đường viền.
  • Màu sắc của đường viền.
  • Kiểu đường viền.

Giờ chúng ta sẽ lần lượt đi vào từng cái cụ thể…

1. Kích thước đường viền

Về quy định kích thước bạn có thể dùng từ khóa để chỉ định như thin, medium, thick hoặc dùng %, em, cá nhân tôi thì thích dùng đơn vị px hơn. Chúng ta viết câu lệnh border-width để áp dụng kích thước đường viền. Ví dụ:

{
   border-width: 3px;
}

Kết quả:

Lưu ý là: Nếu bạn chưa quy định kiểu đường viền (border-style) thì nó vẫn không hiện đường viền lên cho bạn. Để hiện được hộp như này, code đầy đủ phải là:

div {
   border-width: 3px;
   border-style: solid;
   width: 400px;
   height: 300px; 
}

Trước khi tìm hiểu các kiểu đường viền, hãy xem cách thay đổi màu cho viền.

2. Màu sắc của đường viền

Về màu sắc thì bạn có thể dùng bất cứ màu nào, tiện đây, rất có thể bạn sẽ thích bài các cách khai báo màu sắc trong CSS. Chúng ta dùng câu lệnh border-color để áp dụng màu sắc cho đường viền. Ví dụ:

div {
   border-color: aqua;
}
Kết quả:

Code mẫu cho hộp này giống với đoạn trên chỉ khác là thêm màu sắc vào:

div {
   border-width: 3px;
   border-style: solid;
   border-color: aqua;
   width: 400px;
   height: 300px; 
}

Nếu bạn không quy định màu cụ thể cho viền, nó sẽ lấy màu đen làm màu mặc định.

3. Kiểu đường viền

Về kiểu đường viền, ta có khá nhiều kiểu bao gồm: none, hidden, dotted, dashed, solid, double, groove, ridge, inset outset. Để sử dụng kiểu đường viền bạn dùng câu lệnh border-style.

Chúng ta sẽ thử tất cả các kiểu đường viền ở trên – dĩ nhiên trong ứng dụng ngoài đời có một vài kiểu đường viền phổ biến hơn các kiểu khác. Kiểu hay dùng nhất là solid, đó chính là kiểu nét liền mà 2 hộp ở trên lấy.

Thường thì chúng ta hay đặt đường viền cho thẻ div, tuy nhiên trong thực tế bất cứ thẻ nào của html cũng đều áp dụng đường viền được bằng từ khóa border (xem thêm: mô hình hộp trong CSS). Sở dĩ chúng ta không để ý các thẻ html có đường viền là vì theo mặc định chúng không được hiển thị.Để tạo đường viền nét liền cỡ 1px với màu đỏ cho thẻ p ta viết như sau:

p {border-style:solid; border-width:1px; border-color:red;}

Bạn có thể viết rút gọn bằng cách sau:

p {border: 1px solid red;}

Bạn để ý thứ tự: kích cỡ, kiểu và màu sắc – ngoài ra là không có dấu chấm phẩy giữa chúng mà chỉ có dấu cách.

Bây giờ là lúc tôi thử các kiểu khác nhau cho đường viền…

Tạo đường viền cho thẻ theo kiểu dotted

 

Tạo đường viền cho thẻ theo kiểu dashed

 

Tạo đường viền cho thẻ theo kiểu solid

 

Tạo đường viền cho thẻ theo kiểu double

 

Tạo đường viền cho thẻ theo kiểu groove

 

Tạo đường viền cho thẻ theo kiểu ridge

 

Tạo đường viền cho thẻ theo kiểu inset

 

Tạo đường viền cho thẻ theo kiểu outset

2 cái none và hidden đều không làm xuất hiện đường viền.

4. Bốn phía của đường viền

Đường viền có 4 cạnh giống như hình chữ nhật vậy, bạn hoàn toàn tác động được vào một cạnh cụ thể trong 4 cạnh đó. Dưới đây là mã lệnh:

  • border-bottom: tác động đến đường viền ở đáy
  • border-top: tác động đến đường viền ở đỉnh
  • border-left: tác động đến đường viền bên trái
  • border-right: tác động đến đường viền bên phải

border left top right bottom

Nếu muốn chọn yếu tố tác động là màu, kích thước, hay kiểu thì bạn chỉ cần thêm thuộc tính đó vào đằng sau, ví dụ:

{
border-bottom-color: red;
border-top-width: 3px;
border-right-style: dotted;
}

5. Vấn đề gia tăng kích thước của div và các thẻ nói chung khi sử dụng đường viền

Đường viền làm kích thước của thẻ div, img, và tất cả các thẻ khác gia tăng theo cả chiều cao và chiều rộng. Điều này cũng giống thực tế ngoài đời, khi bạn bao cái gì đó bên ngoài cái hộp, cái hộp đó sẽ tăng kích thước.

Giá trị kích thước gia tăng bạn tính được rất dễ dàng, chẳng hạn thẻ div bạn để viền là 3px thì chiều rộng của thẻ đó sẽ tăng 6px, chiều cao cũng vậy. Sỡ dĩ chiều rộng tăng 6px vì mỗi bên trái và phải bạn đã thêm 3px cho viền – giải thích vừa nói cũng áp dụng cho chiều cao.

Điều này sẽ ảnh hưởng một chút đến thiết kế, chẳng hạn nếu bạn để cái hộp có chiều ngang 140px và để viền 2px, chiều rộng sẽ tăng 4px và làm cái hộp dư ra bên ngoài. Để chình lại bạn phải để hộp có chiều rộng là 140px – 4px = 136px để nó khớp đúng với thiết kế ban đầu.

6. Bo tròn góc cho đường viền

Bo tròn góc là thuộc tính của CSS3 làm đường viền trông mềm mại hơn, muốn thế bạn chỉ cần thêm vài dòng sau:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Đoạn -webkit-border-radius: 5px; là để dành cho các trình duyệt tương tự như Google Chrome, -moz-border-radius: 5px; là để dành cho các trình duyệt tương tự như FireFox, border-radius: 5px; là mã chuẩn – Dĩ nhiên bạn phải cho cả 3 dòng trên vào CSS để đảm bảo nó hoạt động tốt trên hầu hết các trình duyệt web. Để thay đổi độ lớn của góc bo, bạn thay đổi giá trị 5px – tăng giảm tùy ý. Nếu tò mò muốn bo tròn ảnh thì hãy xem tiếp bài này.

Có 4 góc để bo, bạn có thể quy định cụ thể là sẽ bo góc nào và không bo góc nào, các thuộc tính giúp cho quy định này đó là:

  • border-top-left-radius: 4px – góc phía trên bên trái sẽ được bo 4px
  • border-top-right-radius: 8px – góc phía trên bên phải được bo 8px
  • border-bottom-right-radius: 16px – góc phía dưới bên phải được bo 16px
  • border-bottom-left-radius: 32px – góc phía dưới bên trái được bo 32px
Cú pháp là đường viền-vị trí trên hoặc dưới-vị trí trái hoặc phải: giá trị. Cuối cùng là kết quả của đoạn code trên:
Bo các góc khác nhau 4px, 8px, 16px và 32px

1 thought on “Cách sử dụng đường viền (border) trong CSS”

Leave a Comment