CSS border-image-width Property

CSS border-image-width Property

This property is used to specify the width of the border image.

Syntax -

border-image-width: number|%|auto;

Now we will see the values with their descriptions -

Value	Description
length	Any length in px.
number	Represents multiples of the corresponding border width and this has a default value of 1.
%	Size of the border image area for the following - The width of area for horizontal offsets, the height for vertical offsets
auto	If specified, the width is the intrinsic width or height of the corresponding image slice

Now we will see Example -

Example - Increasing the border-image-width from top to bottom -

<!DOCTYPE html>
<html>

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

}

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

}

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

}

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

}
</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 -