Cách đặt màu viền (borderColor) của phần tử bằng JavaScript

Để thiết lập màu cho cả bốn cạnh viền cùng lúc, bạn dùng thuộc tính borderColor. Nó chấp nhận từ 1 đến 4 giá trị màu (theo quy tắc TRBL: top, right, bottom, left).

Ví dụ minh họa

Mã sau đổi màu viền hộp từ vàng sang xanh lá khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      height: 300px;
      width: 200px;
      border: thick dashed yellow;
    }
  </style>
</head>
<body>
  <div id="box">
    <p>DEMO TEXT</p>
    <p>DEMO TEXT</p>
    <p>DEMO TEXT</p>
    <p>DEMO TEXT</p>
  </div>
  <br>
  <button type="button" onclick="changeBorderColor()">Đặt màu viền mới</button>
  <script>
    function changeBorderColor() {
      document.getElementById("box").style.borderColor = "green";
      /* Tương đương: borderTopColor, borderRightColor, borderBottomColor, borderLeftColor = green */
    }
  </script>
</body>
</html>

Cú pháp gán nhiều giá trị

Lưu ý: borderColor chỉ có hiệu lực nếu borderStyle khác none và borderWidth > 0.