Border trong CSS

Border-awidth là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels. Xem hình minh họa bên dưới.

Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.

Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web.

CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu vàng).

Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau:

h1 {
border-awidth:thin;
border-color:#FF0000;
border-style:solid	
}
h2 {
border-awidth:thick;
border-color:#CCC;
border-style:dotted  
}

p {
border-awidth:5px;
border-color:#FF00FF; 
border-style:double
  }

Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.

h1 {
border-top-awidth:thin;
border-top-color:#FF0000;
border-top-style:solid;
border-right-awidth:thick;
border-right-color:#AFAFAF;
border-right-style:dotted; 
border-bottom-awidth:2px; 
border-bottom-color:blue; 
border-bottom-style:double; 
border-left-awidth:5px;
border-left-color:violet;
border-left-style:groove
}

Để dễ nhớ chúng ta có thể sử dụng cấu trúc rút gọn của CSS như sau:

Border:<border-awidth> |<border-color> |<border-style>