Cách đặt kiểu viền (borderStyle) của phần tử bằng JavaScript

Thuộc tính borderStyle thiết lập kiểu nét cho cả 4 cạnh viền cùng lúc. Giá trị: none, hidden, solid, dashed, dotted, double, groove, ridge, inset, outset. Chấp nhận 1-4 giá trị (TRBL).

Ví dụ minh họa

Mã sau đổi viền hộp từ solid sang dashed khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #newDiv {
      height: 150px;
      width: 150px;
      border: 2px solid #000000;
    }
  </style>
</head>
<body>
  <div id="newDiv">
    Nội dung Demo!
  </div>
  <br>
  <button type="button" onclick="changeBorderStyle()">Thay đổi kiểu viền</button>
  <script>
    function changeBorderStyle() {
      document.getElementById("newDiv").style.borderStyle = "dashed";
      /* 4 cạnh đều thành nét đứt */
    }
  </script>
</body>
</html>

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

Số giá trị	Ví dụ	Áp dụng
1	`"dashed"`	4 cạnh cùng kiểu
2	`"solid dashed"`	Trên/Dưới = solid, Trái/Phải = dashed
3	`"solid dashed dotted"`	Trên = solid, Trái/Phải = dashed, Dưới = dotted
4	`"solid dashed dotted double"`	Trên, Phải, Dưới, Trái (kim đồng hồ)

Các kiểu nét (border style) chi tiết

Giá trị	Hiển thị	Ghi chú
`none`	Không viền	Mặc định, width = 0
`hidden`	Không viền	Ưu tiên cao trong border-collapse
`solid`	Nét liền	Phổ biến nhất
`dashed`	Nét đứt dài	--- --- ---
`dotted`	Chấm chấm	• • •
`double`	Hai nét liền	Cần width ≥ 3px
`groove`	Rãnh 3D	Tùy màu border-color
`ridge`	Mỏm 3D	Ngược groove
`inset`	Chìm 3D	Như nút nhấn xuống
`outset`	Nổi 3D	Như nút nhấn lên

Lưu ý: borderStyle là **bắt buộc** để viền hiển thị. Nếu chỉ set borderWidth và borderColor mà không set style (mặc định none), viền sẽ không hiện.