Thuộc tính borderColor được sử dụng để thiết lập hoặc lấy màu đường viền của một phần tử. Sử dụng thuộc tính borderColor, chúng ta có thể điều chỉnh màu sắc trên mỗi bên của đường viền, tức là mỗi đường viền bên có màu khác nhau.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính borderColor
object.style.borderColor = "color|transparent|initial|inherit"
Giá trị
Các giá trị thuộc tính được giải thích như sau -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | Màu sắc Để chỉ định màu đường viền. |
| 2 | Minh bạch Điều này làm cho màu của đường viền trong suốt và nội dung bên dưới nó có thể được nhìn thấy. |
| 3 | tên đầu tiên Để thiết lập thuộc tính này thành giá trị ban đầu. |
| 4 | kế thừa Để kế thừa giá trị tài sản mẹ |
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính borderColor -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:100px;
height:100px;
border:solid 10px ;
border-color: limegreen crimson;
top: 10px;
}
</style>
<script>
function changeBorderColor(){
document.getElementById("DIV1").style.borderColor="crimson limegreen";
document.getElementById("Sample").innerHTML="The border colors are now reversed ";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Reverse the above div border colors by clicking the below button</p>
<button onclick="changeBorderColor()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút BIÊN GIỚI THUỘC -
