Cách đặt màu viền phải (borderRightColor) bằng JavaScript

Để thay đổi màu của viền bên phải, bạn dùng thuộc tính borderRightColor. Nó chấp nhận mọi giá trị màu CSS hợp lệ: tên màu, hex, rgb, rgba, hsl, hsla, currentColor, transparent...

Ví dụ minh họa

Mã sau đổi màu viền phải của hộp sang xanh lá khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 300px;
      height: 200px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="box">Văn bản demo</div>
  <br><br>
  <button type="button" onclick="changeRightBorderColor()">Đổi màu viền phải</button>
  <script>
    function changeRightBorderColor() {
      document.getElementById("box").style.borderRightColor = "green";
    }
  </script>
</body>
</html>

Lưu ý

• Phải có borderRightStyle != none: Mặc định từ border: thick solid gray đã có style = solid.
• Shorthand: Dùng borderRight = "5px solid green" để đặt width, style, color cùng lúc.
• Đặt 4 cạnh khác màu: Dùng borderColor = "red green blue yellow" (trên, phải, dưới, trái).

Các thuộc tính viền phải riêng lẻ