Cách đặt kiểu viền dưới (borderBottomStyle) bằng JavaScript

Để thiết lập kiểu nét (style) cho viền dưới, bạn dùng thuộc tính borderBottomStyle. Giá trị phổ biến: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden.

Ví dụ minh họa

Mã sau thêm viền dưới nét đứt cho div khi nhấn nút:

<!DOCTYPE html>
<html>
<body>
  <div id="box">Văn bản demo</div>
  <br>
  <button onclick="setBottomBorderStyle()">Đặt kiểu viền dưới</button>
  <script>
    function setBottomBorderStyle() {
      document.getElementById("box").style.borderBottomStyle = "dashed";
      /* Có thể: "solid", "dotted", "double", "groove", "ridge", "inset", "outset" */
    }
  </script>
</body>
</html>

Lưu ý quan trọng

Phải có style mới thấy viền: Mặc định borderBottomStyle = "none". Nếu không set style, viền không hiển thị dù đã set width/color.
Shorthand: Dùng borderBottom = "2px dashed red" để đặt width, style, color cùng lúc.
none vs hidden: Cùng ẩn viền, nhưng hidden ưu tiên cao hơn trong border-collapse: collapse.

Bảng các kiểu nét (border style)

Giá trị	Hiển thị
`none`	Không viền (mặc định)
`hidden`	Không viền (ưu tiên cao trong collapse)
`solid`	Nét liền
`dashed`	Nét đứt dài
`dotted`	Chấm chấm
`double`	Hai nét liền song song
`groove`	Hiệu ứng rãnh (3D)
`ridge`	Hiệu ứng mỏm (3D, ngược groove)
`inset`	Hiệu ứng chìm (3D)
`outset`	Hiệu ứng nổi (3D, ngược inset)