The HTML DOM borderImageSlice property is used to define how a border image is divided into regions. This is done by specifying the border image offsets in percentage, number or global values.
Following is the syntax for −
Setting the borderImageSlice property −
object.style.borderImageSlice = "number|%|fill|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| number | It is used for denoting pixels in a raster image or vector coordinates in a vector image. |
| % | These are used for specifying the horizontal and vertical offsets relative to the picture size. Its default value is 100%. |
| ill | It is used for preserving the border-image middle part. |
| initial | For setting this property to default value. |
| inherit | To inherit the parent property value. |
Let us look at an example for the borderImageSlice property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
}
#b1 {
border: 30px solid transparent;
padding: 5px;
font-size:20px;
border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg");
border-image-slice: 60%;
}
</style>
<script>
function changeBorderSlice(){
document.getElementById("b1").style.borderImageSlice="10%";
document.getElementById("Sample").innerHTML="The border image slice is now changed";
}
</script>
</head>
<body>
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Slice” button −
