The HTML DOM borderImageWidth property is used to set or get the width of the border image for an element.
Following is the syntax for −
Setting the borderImageWidth property −
object.style.borderImageWidth = "number|%|auto|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| length | For describing the border width size in px. |
| number | For describing the border width in multiples of corresponding border width and it’s default value is 1. |
| % | For describing the horizontal offsets and vertical off sets for the border image area width. |
| auto | This sets the width and height corresponding to the image width and height. |
| initial | For setting this property to default value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the borderImageWidth property −
Example
<!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="The border image width is now increased";
}
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>Increase the above div border image width by clicking the below button</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Width” button −
