CSS border-image-slice Property

CSS border-image-slice Property

Specifies the offset that is used to divide the image into nine regions (four corners, four edges and a middle).

Syntax -

border-image-slice: number|%|fill|initial|inherit;

Now we will see the values with description -

Value	Description
*number*	The numbers represent pixel coordinates for vector images.
%	Percentages are relative to the height or width of the image
fill	Causes the middle part of the image to be displayed

Now we will see an Example -

Example - Using border images with different slice count -

<!DOCTYPE html>
<html>

<style>
.one{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image3.png);
border-image-slice: 10;
}

.two{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image3.png);
border-image-slice: 20;
}

.three{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image3.png);
border-image-slice: 30;
}

.four{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image3.png);
border-image-slice: 40;
}
</style>

<body>

<p class="one">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

<p class="two">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

<p class="three">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

<p class="four">This is a sample pera Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo ipsa harum, laudantium ipsam disti</p>

</body>

</html>

Output -