Thuộc tính borderImageWidth trong HTML DOM Style

Thuộc tính borderImageWidth dùng để thiết lập hoặc lấy độ rộng của hình ảnh viền (border image) cho phần tử.

Cú pháp

object.style.borderImageWidth = "number|%|auto|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
length	Kích thước độ rộng viền bằng px
number	Bội số của border-width tương ứng (mặc định: 1)
%	Phần trăm so với kích thước vùng hình ảnh viền
auto	Độ rộng/cao tương ứng với kích thước hình ảnh gốc
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;
    padding: 25px;
    border-style: solid;
    border-color: transparent;
    border-image-slice: 30;
    border-image-source: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg");
    border-image-width: 10px;
  }
</style>
<script>
  function changeBorderWidth() {
    document.getElementById("DIV1").style.borderImageWidth = "30px";
    document.getElementById("Sample").innerHTML = "Độ rộng hình ảnh viền đã được tăng lên";
  }
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>Tăng độ rộng border image của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeBorderWidth()">Thay đổi Border Width</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Div ban đầu có border-image-width 10px. Sau khi nhấn nút, tăng lên 30px, làm hình ảnh viền hiển thị lớn hơn.

Lưu ý: Cần thiết lập border-image-source và border-image-slice thì border-image-width mới có hiệu lực.