Thuộc tính borderLeftStyle dùng để thiết lập hoặc lấy kiểu dáng viền bên trái của phần tử.
Cú pháp
object.style.borderLeftStyle = value
Các giá trị kiểu viền
| Giá trị | Mô tả |
|---|---|
| none | Không có 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 nét |
| double | Viền kép |
| groove | Viền 3D rãnh (nghịch đảo ridge) |
| ridge | Viền 3D nổi (nghịch đảo groove) |
| inset | Viền 3D chìm (nghịch đảo outset) |
| outset | Viền 3D nổi (nghịch đảo inset) |
| 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 {
width: 300px;
height: 100px;
border-left: 8px solid dodgerblue;
border-left-style: groove;
}
</style>
<script>
function changeLeftStyle() {
document.getElementById("DIV1").style.borderLeftStyle = "dashed";
document.getElementById("Sample").innerHTML = "Kiểu viền trái đã được thay đổi";
}
</script>
</head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Thay đổi kiểu viền trái của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeLeftStyle()">Thay đổi Left Style</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu viền trái kiểu groove (rãnh 3D) màu dodgerblue. Sau khi nhấn nút, chuyển thành kiểu dashed (nét đứt).