Màu đường viền CSS
Màu đường viền CSS
Thuộc tính border-color
được sử dụng để thiết lập màu cho 4 đường viền.
Màu sắc có thể được thiết lập bằng cách:
- tên - chỉ định tên màu, như "đỏ"
- HEX - chỉ định giá trị HEX, như "#ff0000"
- RGB - chỉ định giá trị RGB, như "rgb(255,0,0)"
- HSL - chỉ định giá trị HSL, như "hsl(0, 100%, 50%)"
- trong suốt
Lưu ý: Nếu border-color
không được đặt, nó sẽ kế thừa màu của phần tử.
Ví dụ
Trình diễn các màu đường viền khác nhau:
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color:
blue;
}
Kết quả:
Màu sắc cụ thể
Thuộc tính border-color
có thể có từ một đến bốn giá trị (cho viền trên, viền phải, viền dưới và viền trái).
Ví dụ
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
Hãy tự mình thử » Giá trị HEX
Màu của đường viền cũng có thể được chỉ định bằng giá trị thập lục phân (HEX):
Giá trị RGB
Hoặc bằng cách sử dụng các giá trị RGB:
Giá trị HSL
Bạn cũng có thể sử dụng các giá trị HSL:
Bạn có thể tìm hiểu thêm về các giá trị HEX, RGB và HSL trong các chương Màu CSS của chúng tôi.