CSS border-image-source Property

CSS border-image-source Property

The property specifies the path of image to be used as a border in any element.

Syntax -

border-image-source: none|image;

Now we will see the values with their description -

none	No image will be used.
*image*	Path of the image to use it for borders.

Now we will see Example -

Example -

<!DOCTYPE html>
<html>

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

.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: 20;
}

.four{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image3.png);
border-image-slice: 20;
}
</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 -