CSS - Border Image

The border-image property in CSS lets you create a border from an existing image.

Border-image property in CSS

Let us say, we have the below image.

Now, if you want to delete the middle section of the image and create a border only with the outer section, the border-image property lets you achieve that.

Example :

<html>
<head>
	<style>
		p {
  			border: 20px solid;
  			padding: 15px;
  			border-image: url(myimage.png) 60;  			
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have taken the below image.

And used it as border image.

So, what the border-image property does is, takes the image myimage.png and slices 60px from each side of the image. As a result a border is created deleting the middle portion of the image.

border-image: url(myimage.png) 60;

Also remember to specify the border property.

border: 20px solid;

The border property specifies the width of the border(20px in the above example).

Round value for border-image property in CSS

So far we have seen two values for the border-image property has two values. The image name and size of the image slice.

The third value would be round.

The round value says to repeat the middle portion of the image to create a border.

Example :

<html>
<head>
	<style>
		p {
  			border: 20px solid;
  			padding: 15px;
  			border-image: url(myimage.png) 60 round;  			
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output, the middle portion of the image is repeated to create an image border.

This is because of the third value round of the border-image property.

border-image: url(myimage.png) 60 round;

Stretch value for border-image property in CSS

Stretch is also a value for the border-image property. Just like the value round, stretch is also the third value for border-image property.

The stretch value says to stretch the middle portion of the image to create a border.

Example :

<html>
<head>
	<style>
		p {
  			border: 20px solid;
  			padding: 15px;
  			border-image: url(myimage.png) 60 stretch;  			
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output, the middle portion of the image is stretched to create an image border.

This is because of the third value stretch of the border-image property.

border-image: url(myimage.png) 60 stretch;

❮❮ PREV NEXT ❯❯