Thuộc tính border dùng để định dạng đường viền cho phần tử HTML.
Dưới đây là một số thuộc tính border:
- border-style [Thiết lập kiểu đường viền]
- border-width [Thiết lập độ dày của đường viền]
- border-color [Thiết lập màu của đường viền]
Thiết lập kiểu đường viền
Thuộc tính border-style dùng để thiết lập kiểu đường viền.
Cú pháp
border-style: kiểu đường viền;
Chúng ta có một số kiểu đường viền như: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
#p1{border-style: dotted;}
#p2{border-style: dashed;}
#p3{border-style: solid;}
#p4{border-style: double;}
#p5{border-style: groove;}
#p6{border-style: ridge;}
#p7{border-style: inset;}
#p8{border-style: outset;}
#p9{border-style: none;}
#p10{border-style: hidden;}
Xem ví dụ
Lưu ý: Đường viền của phần tử chỉ hiện lên khi nó đã được thiết lập kiểu đường viền.
Thiết lập độ dày của đường viền
Thuộc tính border-width dùng để thiết lập độ dày của đường viền
p{
border-style: solid;
border-width: 10px;
}
Xem ví dụ
Lưu ý: Nếu ta không thiết lập độ dày của đường viền thì mặc định đường viền sẽ có độ dày là 3px
Thiết lập màu của đường viền
Thuộc tính border-color dùng để thiết lập màu của đường viền
Cú pháp
border-color: màu sắc;
Trong đó, "màu sắc" có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX
[Nếu chưa rõ cách xác định màu, bạn có thể xem lại bài Màu sắc trong CSS]
p{
border-style: solid;
border-color: green;
}
Xem ví dụ
Thiết lập đường viền ở các vị trí khác nhau
Đường viền luôn bao gồm bốn vị trí: top, right, bottom, left
Nếu định dạng cho đường viền mà không xác định vị trí cụ thể thì mặc định cả 4 vị trí sẽ có cùng một kiểu định dạng.
Để định dạng cho đường viền ở từng vị trí cụ thể, ta có hai cách:
Cách 1: Thêm vị trí vào thuộc tính
Cú pháp
border-vị trí-style|width|color: giá trị;
h2{
border-top-style: solid;
border-top-width: 5px;
border-top-color: green;
border-right-style: double;
border-right-width: 10px;
border-right-color: blue;
border-bottom-style: dashed;
}
Xem ví dụ
Ta cũng có thể tạo đường viền mặc định cho cả bốn vị trí trước, sau đó chỉnh lại từng vị trí.
h2{
border-style: solid;
border-width: 5px;
border-color: gray;
border-bottom-style: double;
border-bottom-width: 15px;
border-bottom-color: red;
}
Xem ví dụ
Cách 2: Thiết lập nhiều giá trị
Chúng ta sẽ thiết lập nhiều giá trị tương ứng với nhiều vị trí. Với cách này, ta có 4 cú pháp:
border-style|width|color: value;
- Cả bốn vị trí đều có cùng giá trị value
border-style|width|color: value1 value2;
- Vị trí top, bottom có giá trị value1
- Vị trí right, left có giá trị value2
border-style|width|color: value1 value2 value3;
- Vị trí top có giá trị value1
- Vị trí right, left có giá trị value2
- Vị trí bottom có giá trị value3
border-style|width|color: value1 value2 value 3 value4;
- Vị trí top có giá trị value1
- Vị trí right có giá trị value2
- Vị trí bottom có giá trị value3
- Vị trí left có giá trị value4
h2{
border-style: solid dotted;
border-width: 5px 3px 20px;
border-color: green red blue gray;
}
Xem ví dụ
Cú pháp định dạng đường viền rút gọn
Thay vì phải định dạng cho đường viền bởi 3 thuộc tính [border-style, border-width, border-color] riêng biệt, thì ta có thể gôm chúng lại thành một theo cú pháp sau:
border: value1 value2 value3;
Trong đó:
- value1 là giá trị của thuộc tính border-width
- value2 là giá trị của thuộc tính border-style
- value3 là giá trị của thuộc tính border-color
Lưu ý: Không nhất thiết thuộc tính border phải có đủ 3 giá trị. Tuy nhiên, các giá trị phải được sắp xếp theo đúng thứ tự đó.
Ngoài ra, ta cũng có thể định dạng cho đường viền ở từng vị trí cụ thể bằng cú pháp border-vị trí
h2{
border-bottom: 20px dotted green;
}
Xem ví dụ