Thuộc tính borderImageSource dùng để thiết lập hoặc lấy nguồn hình ảnh được dùng làm viền cho phần tử.
Cú pháp
object.style.borderImageSource = "none|image|initial|inherit"
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| none | Không dùng hình ảnh (mặc định). Vẫn áp dụng border-style nếu có |
| image | Đường dẫn đến hình ảnh dùng làm viền (url(...)) |
| 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: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
border-image-slice: 30;
}
</style>
<script>
function changeBorderImage() {
document.getElementById("DIV1").style.borderImageSource = "url('https://www.tutorialspoint.com/images/Swift.png')";
document.getElementById("Sample").innerHTML = "Hình ảnh viền đã được thay đổi";
}
</script>
</head>
<body>
<div id="DIV1">Văn bản mẫu bên trong div</div>
<p>Thay đổi hình ảnh viền của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBorderImage()">Thay đổi Border Image</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Div ban đầu dùng logo ASP.NET làm viền. Sau khi nhấn nút, chuyển sang dùng hình Swift.png.
Lưu ý: Phải kết hợp với border-image-slice (cắt hình) và border-image-width (độ rộng) để hiển thị đúng. Giá trị border-style: solid và border-color: transparent thường cần thiết.