Thuộc tính borderBottom là shorthand cho viền dưới: gộp border-bottom-width, border-bottom-style, border-bottom-color.
Cú pháp
object.style.borderBottom = "width style color|initial|inherit"
Các tham số
| Tham số | Mô tả |
|---|---|
| Width | Độ dày viền dưới. |
| Style | Kiểu viền (solid, dashed, dotted...). |
| Color | Màu viền. |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi toàn bộ viền dưới ảnh:
<!DOCTYPE html> <html> <head> <style>
#IMG1 {
border-bottom: 7px solid orange;
box-shadow: 2px 2px 4px 1px seagreen;
}
</style>
<script>
function changeBorder(){
document.getElementById("IMG1").style.borderBottom = "10px dotted pink";
document.getElementById("Sample").innerHTML = "Viền dưới ảnh đã thay đổi";
}
</script> </head>
<body>
<h2>Học Kotlin</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/kotlin/images/kotlin.jpg">
<p>Nhấn nút để thay đổi viền dưới</p>
<button onclick="changeBorder()">THAY ĐỔI VIỀN DƯỚI</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Viền dưới ban đầu 7px solid orange:
Sau khi nhấn nút: 10px dotted pink:
