Signup/Sign In
PUBLISHED ON: APRIL 14, 2021

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 property.

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.



About the author:
I like to write content about technology, helping users to understand technical terms easily. I also write about Python, Java, and various other programming language. I have an experience of 3+ years in content creation.