Thuộc tính borderColor trong HTML DOM Style

Thuộc tính borderColor đặt hoặc lấy màu viền cho 4 cạnh. Có thể chỉ định 1-4 màu để mỗi cạnh màu khác nhau (theo thứ tự: top, right, bottom, left).

Cú pháp

object.style.borderColor = "color|transparent|initial|inherit"

Các giá trị

Ví dụ

Đảo ngược màu viền 2 cạnh:

<!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 = "Màu viền đã đảo ngược"; 
  } 
</script> </head> 
<body> 
<div id="DIV1"></div> 
<p>Nhấn nút để đảo màu viền</p> 
<button onclick="changeBorderColor()">THAY ĐỔI MÀU VIỀN</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Ban đầu: top/bottom = limegreen, left/right = crimson:

Sau khi nhấn nút: top/bottom = crimson, left/right = limegreen: