CSS border-image-repeat Property

CSS border-image-repeat Property

The property specifies how the images for the sides and the middle of the border image are scaled.

Syntax -

Now we will see the values with their descriptions -

Value	Description
stretch	The image is stretched to fill the area, and this is the default value.
repeat	The image is tiled, or repeated to fill the area
round	The image is repeated to fill the area. If it does not fill the area with a whole number of reparations, the image is rescaled so it fits.
space	The image is tiled to fill the area. If it does not fill the area with a whole number of tiles.

Example -

<!DOCTYPE html>
<html>

<style>
.one{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image1.jpg);
border-image-repeat: stretch;
border-image-slice: 30;
}

.two{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image1.jpg);
border-image-repeat: repeat;
border-image-slice: 30;
}

.three{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image1.jpg);
border-image-repeat: round;
border-image-slice: 30;
}

.four{
border: 15px solid transparent;
padding: 12px;
margin: 15px;
border-image-source: url(image1.jpg);
border-image-repeat: space;
border-image-slice: 30;
}
</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 -