CSS border-image-slice property
The border-image-slice property in CSS is identified to divide the image into regions, which is specified by the border-image-source. These divided regions form the components of the border-image of an element.
This slicing process creates nine regions in total, which includes four corners, four edges, and a middle region. Four slice lines set a given distance from their respective sides and control the size of the regions.
The border-image-slice property can be specified with the use of one to four number-percentage values for representing the position of each image slice. Negative values are invalid and the values greater than their corresponding dimensions are clamped to 100%.
Syntax for border-image-slice property:
Following is the syntax for the border-image-slice
border-image-slice: number|%|fill|initial|inherit;
CSS border-image-slice property values:
Let's see what values this property can have and what do those values do:
| Value |
Description |
| number |
This value refers to the edge offset value in pixels for the raster images and coordinates for the vector images. |
| percentage |
This value refers to the edge offset value in percentage for the size of the source image. |
| fill |
This value is identified for preserving the middle image region and displaying it like a background image. |
Example: CSS border-image-slice property
Here in the example below, we are using the border-image-slice property with different border images, colors, and their different values. In this case, we have given the border-image-slice value using the number value.
<!DOCTYPE html>
<html>
<head>
<title>Border-image-slice property in CSS</title>
<style type="text/css">
.wrapper {
width: 400px;
height: 300px;
}
div > div {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
border-image-slice: 30;
border-image-repeat: round;
}
li {
display: flex;
place-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div></div>
</div>
<ul>
<li>
<label for="width">slide to adjust <code>border-width</code>
</label>
<input type="range" min="10" max="45" id="width">
<output id="width-output">30px</output>
</li>
<li>
<label for="slice">slide to adjust <code>border-image-slice</code>
</label>
<input type="range" min="10" max="45" id="slice">
<output id="slice-output">30</output>
</li>
</ul>
</body>
</html>
Output:
Example 2: CSS border-image-slice property
Here in the example below, we are using the border-image-slice property with different border images, colors, and their different values. In this case, we have given the border-image-slice value using the fill value as 10% fill 8 14.
<!DOCTYPE html>
<html>
<head>
<title>Border-image-slice property in CSS</title>
<style type="text/css">
.wrapper {
width: 400px;
height: 300px;
}
div > div {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
border-image-slice: 10% fill 8 14;
border-image-repeat: round;
}
li {
display: flex;
place-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div></div>
</div>
<ul>
<li>
<label for="width">slide to adjust <code>border-width</code>
</label>
<input type="range" min="10" max="45" id="width">
<output id="width-output">30px</output>
</li>
<li>
<label for="slice">slide to adjust <code>border-image-slice</code>
</label>
<input type="range" min="10" max="45" id="slice">
<output id="slice-output">30</output>
</li>
</ul>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
15 |
15 |
| Edge |
12 |
12 |
| Firefox |
15 |
15 |
| Internet Explorer |
11 |
11 |
| Opera |
15 |
15 |
| Safari |
6 |
6 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
15 |
15 |
| Opera Android |
14 |
14 |
| IOS Safari |
6 |
6 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the border-image-slice property in CSS is 100%. This property is applicable to all elements except the internal table elements in case if the value for border-collapse is collapse. It is also applicable to the ::first-letter. It is not an inherited property. Percentages assert the size of the border-image. The computed value for this property is one to four percentages or absolute lengths. The animation type of this property is the computed value type.
