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