Sự miêu tả
Thuộc tính màu viền cho phép bạn thay đổi màu của đường viền bao quanh một phần tử. Bạn có thể thay đổi từng màu của các cạnh dưới, trái, trên và phải của đường viền phần tử bằng cách sử dụng các thuộc tính:
border-bottom-color thay đổi màu của đường viền dưới cùng.
border-top-color thay đổi màu của đường viền trên cùng.
border-left-color thay đổi màu của đường viền bên trái.
border-right-color thay đổi màu của đường viền bên phải.
Những giá trị khả thi
Áp dụng đối với
Tất cả các phần tử HTML.
Cú pháp DOM
object.style.borderColor = "red";
Thí dụ
Đây là ví dụ cho thấy tác dụng của tất cả các thuộc tính này -
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>
Điều này sẽ tạo ra kết quả sau: