Cách đặt độ rộng viền dưới (borderBottomWidth) bằng JavaScript

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

Ví dụ minh họa

Mã sau đặt kiểu viền dưới thành nét đứt và độ rộng 5px khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <div id="box">Văn bản demo</div>
  <br>
  <button onclick="setBottomBorder()">Đặt độ rộng viền dưới</button>
  <script>
    function setBottomBorder() {
      const box = document.getElementById("box");
      box.style.borderBottomStyle = "dashed"; /* Bắt buộc có style mới thấy width */
      box.style.borderBottomWidth = "5px";
    }
  </script>
</body>
</html>

Lưu ý quan trọng

• Phải có borderBottomStyle: Nếu borderBottomStyle là none (mặc định), đặt borderBottomWidth sẽ không hiển thị viền. Hãy đặt style trước hoặc cùng lúc.
• Shorthand: Dùng borderBottom = "5px dashed red" để đặt width, style, color cùng lúc.
• Giá trị mặc định: medium (khoảng 3-4px tuỳ trình duyệt).

Các thuộc tính viền dưới liên quan