Cách đặt tất cả thuộc tính border-right trong một khai báo bằng JavaScript

Thuộc tính shorthand borderRight** cho phép đặt đồng thời border-right-width, border-right-style và border-right-color trong một câu lệnh.

Ví dụ minh họa

Mã sau thay đổi viền phải thành dày, nét liền, màu đen:

<!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="changeRightBorder()">Thay đổi viền phải</button>
  <script>
    function changeRightBorder() {
      document.getElementById("box").style.borderRight = "thick solid #000000";
      /* Tương đương:
         borderRightWidth = "thick"
         borderRightStyle = "solid"
         borderRightColor = "#000000"
      */
    }
  </script>
</body>
</html>

Cú pháp shorthand

borderRight = "width style color" — Thứ tự không cố định, trình duyệt tự nhận diện.

• Ví dụ: "3px dashed red", "medium double #00f", "solid 2px currentColor"
• Nếu bỏ color → dùng currentColor (màu chữ).
• Nếu bỏ width → mặc định medium.
• Nếu bỏ style → mặc định none (viền ẩn).

So sánh: set từng thuộc tính vs shorthand

// Cách 1: Shorthand (ngắn gọn)
el.style.borderRight = "2px solid blue";

// Cách 2: Từng thuộc tính (linh hoạt hơn khi chỉ đổi 1 thứ)
el.style.borderRightWidth = "2px";
el.style.borderRightStyle = "solid";
el.style.borderRightColor = "blue";

Mẹo: Dùng shorthand khi muốn reset toàn bộ viền phải. Dùng thuộc tính con khi chỉ cần thay đổi một khía cạnh (ví dụ: chỉ đổi màu mà giữ width/style cũ).