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.

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 để đạt được chính xác những gì mình muố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ư trên, 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:

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 và 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…

---

---

---

---

---

---

---

---

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;

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: 5px;
border-right-style: dotted;
}

Kết quả:

---

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 này gồm 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 = 3px * 2, 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: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Kết quả:

---

Đoạn -webkit-border-radius: 15px; là để dành cho các trình duyệt tương tự như Google Chrome, -moz-border-radius: 15px; là để dành cho các trình duyệt tương tự như FireFox, border-radius: 15px; 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ị 15px – tăng giảm tùy ý. Nếu bạn 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 (border)-vị trí trên (top) hoặc dưới (bottom)-vị trí trái (left) hoặc phải (right): giá trị (px).

Cuối cùng là kết quả của đoạn code trên: