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