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

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

Ví dụ minh họa

Mã sau thay viền trên thành dày, nét liền, màu đen 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="changeTopBorder()">Thay đổi viền trên</button>
  <script>
    function changeTopBorder() {
      document.getElementById("box").style.borderTop = "thick solid #000000";
      /* Tương đương:
         borderTopWidth = "thick"
         borderTopStyle = "solid"
         borderTopColor = "#000000"
      */
    }
  </script>
</body>
</html>

Cú pháp borderTop

borderTop = "width style color" — Thứ tự không cố định.

• Ví dụ: "3px dashed red", "medium double #00f", "solid 1px currentColor"
• Bỏ color → currentColor (màu chữ).
• Bỏ width → medium.
• Bỏ style → none (viền ẩn).

Thuộc tính con viền trên

Mẹo: Dùng shorthand khi muốn reset toàn bộ viền trên. Dùng thuộc tính con khi chỉ thay đổi một khía cạnh (ví dụ: chỉ đổi màu).