Cách đặt độ rộng viền trên (borderTopWidth) bằng JavaScript

Để thiết lập độ dày của viền trên, bạn dùng thuộc tính borderTopWidth. Giá trị có thể là từ khóa (thin, medium, thick) hoặc độ dài cụ thể (px, em, rem...).

Ví dụ minh họa

Mã sau tăng độ rộng viền trên lên 10px khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid blue;
      width: 300px;
      height: 300px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="box">Văn bản demo</div>
  <br><br>
  <button type="button" onclick="changeTopBorderWidth()">Thay đổi độ rộng viền trên</button>
  <script>
    function changeTopBorderWidth() {
      document.getElementById("box").style.borderTopWidth = "10px";
      /* Lưu ý: borderTopStyle phải khác 'none' (mặc định là 'solid' do border shorthand) */
    }
  </script>
</body>
</html>

Lưu ý

• Phải có borderTopStyle: Nếu style là none, width không hiển thị. Trong ví dụ, border: thick solid blue đã set style = solid.
• Shorthand: Dùng borderTop = "10px solid red" để đặt width, style, color cùng lúc.
• Tương tự: borderRightWidth, borderBottomWidth, borderLeftWidth.

Bảng từ khóa độ rộng