Thuộc tính borderStyle là shorthand để lấy hoặc thiết lập kiểu viền cho phần tử. Nhận 1-4 giá trị theo quy tắc:
- 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
Cú pháp
object.style.borderStyle = value
Các giá trị kiểu viền
| 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 |
| 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 |
| ridge | Viền 3D nổi |
| inset | Viền 3D chìm |
| outset | Viền 3D nổi |
| 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: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle() {
document.getElementById("DIV1").style.borderStyle = "dashed";
document.getElementById("Sample").innerHTML = "Kiểu viền đã được thay đổi thành dashed";
}
</script>
</head>
<body>
<div id="DIV1">VĂN BẢN MẪU</div>
<p>Thay đổi kiểu viền của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBorderStyle()">Thay đổi Border Style</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu viền groove (rãnh 3D) màu dodgerblue. Sau khi nhấn nút, toàn bộ 4 cạnh chuyển thành dashed (nét đứt).