Thuộc tính borderBottomStyle đặt hoặc lấy kiểu đường viền dưới: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Cú pháp
object.style.borderBottomStyle = value
Các giá trị
| Giá trị | Mô tả |
|---|---|
| none | Không viền (mặc định). |
| hidden | Giống none nhưng vẫn chiếm không gian viền. |
| dotted | Viền chấm. |
| dashed | Viền nét đứt. |
| solid | Viền liền. |
| double | Viền kép. |
| groove | Viền 3D rãnh (ngược ridge). |
| ridge | Viền 3D nổi (ngược groove). |
| inset | Viền 3D chìm (ngược outset). |
| outset | Viền 3D nổi lên (ngược inset). |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi kiểu viền dưới:
<!DOCTYPE html> <html> <head> <style>
#DIV1 {
width: 300px;
height: 100px;
border-bottom: 8px solid dodgerblue;
border-bottom-style: groove;
}
</style>
<script>
function changeBottomStyle(){
document.getElementById("DIV1").style.borderBottomStyle = "dashed";
document.getElementById("Sample").innerHTML = "Kiểu viền dưới đã thay đổi";
}
</script> </head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Nhấn nút để đổi border-bottom-style</p>
<button onclick="changeBottomStyle()">THAY ĐỔI KIỂU DƯỚI</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Viền dưới ban đầu groove:
Sau khi nhấn nút: dashed:
