Thuộc tính borderWidth trong HTML DOM Style

Thuộc tính borderWidth là shorthand để lấy hoặc thiết lập độ dày viền cho phần tử. Nhận 1-4 giá trị:

4 giá trị: gán theo chiều kim đồng hồ (trên, phải, dưới, trái)
1 giá trị: áp dụng cho 4 cạnh
2 giá trị: trên/dưới = giá trị 1, trái/phải = giá trị 2
3 giá trị: trên = giá trị 1, trái/phải = giá trị 2, dưới = giá trị 3

Cú pháp

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
thin	Viền mỏng
medium	Viền trung bình (mặc định)
thick	Viền dày
length	Độ dày cụ thể (px, em, rem...)
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    height: 100px;
    width: 200px;
    border: 10px groove orange;
    padding: 10px;
    border-width: 30px;
  }
</style>
<script>
  function changeBorderWidth() {
    document.getElementById("DIV1").style.borderWidth = "5px";
    document.getElementById("Sample").innerHTML = "Độ dày viền đã được giảm xuống";
  }
</script>
</head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Thay đổi độ dày viền của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBorderWidth()">Thay đổi Border Width</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu viền 4 cạnh dày 30px (groove orange). Sau khi nhấn "Thay đổi Border Width", 4 cạnh cùng co lại còn 5px.