Cách đặt độ rộng viền (borderWidth) của phần tử bằng JavaScript

Thuộc tính borderWidth (shorthand) thiết lập độ dày cho 4 cạnh viền cùng lúc. Chấp nhận từ khóa (thin, medium, thick) hoặc độ dài cụ thể. Mặc định: medium.

Ví dụ minh họa

Mã sau đổi độ rộng viền hộp từ thick sang thin 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="changeBorderWidth()">Thay đổi độ rộng viền</button>
  <script>
    function changeBorderWidth() {
      document.getElementById("box").style.borderWidth = "thin";
      /* 4 cạnh đều thành thin (~1px) */
    }
  </script>
</body>
</html>

Cú pháp 1-4 giá trị (TRBL)

Từ khóa độ rộng

Thuộc tính con riêng lẻ

• borderTopWidth
• borderRightWidth
• borderBottomWidth
• borderLeftWidth

Lưu ý: borderWidth chỉ có hiệu lực nếu borderStyle != none. Dùng shorthand border = "2px solid red" để đặt width, style, color cùng lúc.