Thuộc tính borderBottomWidth đặt hoặc lấy độ dày viền dưới. Có thể dùng từ khóa (thin, medium, thick) hoặc độ dài cụ thể.
Cú pháp
object.style.borderBottomWidth = "thin|medium|thick|length|initial|inherit"
Các giá trị
| 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 | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Giảm độ dày viền dưới div:
<!DOCTYPE html> <html> <head> <style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-width: 30px;
}
</style>
<script>
function changeBottomWidth(){
document.getElementById("DIV1").style.borderBottomWidth = "1px";
document.getElementById("Sample").innerHTML = "Độ dày viền dưới đã giảm";
}
</script> </head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Nhấn nút để giảm border-bottom-width</p>
<button onclick="changeBottomWidth()">THAY ĐỔI ĐỘ DÀY DƯỚI</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Viền dưới dày 30px:
Sau khi nhấn nút: 1px:
