Màu viền CSS
Màu viền CSS
Thuộc border-colortính được sử dụng để đặt màu của bốn đường viền.
Màu có thể được đặt bằng:
- tên - chỉ định tên màu, chẳng hạn như "đỏ"
- HEX - chỉ định một giá trị HEX, như "# ff0000"
- RGB - chỉ định một giá trị RGB, như "rgb (255,0,0)"
- HSL - chỉ định một giá trị HSL, như "hsl (0, 100%, 50%)"
- trong suốt
Lưu ý: Nếu border-colorkhông được đặt, nó sẽ kế thừa màu của phần tử.
Thí dụ
Trình diễn các màu 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ả:
Red border
Green border
Blue border
Màu bên cụ thể
Thuộc border-colortính có thể có từ một đến bốn giá trị (cho đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái).
Thí dụ
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}
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):
Thí dụ
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}
Giá trị RGB
Hoặc bằng cách sử dụng các giá trị RGB:
Thí dụ
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}
Giá trị HSL
Bạn cũng có thể sử dụng các giá trị HSL:
Thí dụ
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%);
/* red */
}
Bạn có thể tìm hiểu thêm về các giá trị HEX, RGB và HSL trong chương Màu CSS của chúng tôi .