Adding CSS Border Images by Using the Border-Image Property

CSS Border Image: Main Tips

• The border-image shorthand sets images as borders of elements.
• For the shorthand to work, an element needs to have a border.
• Border images can be sliced or repeated in to fill in the lines.

How border-image Is Used

The CSS border-image property sets an image for the border of an element.

Here we see the original 60 x 60px image:

Here we see the image as a border!

This shorthand property combines these parameters in one declaration:

Remember: the shorthand requires only border-image-source. Other properties are optional.

Adding Image Borders to Elements

Here is a code example for setting up an image border for an HTML element:

#borderimage {  	    
    border: 15px solid transparent;      	
    padding: 5px;     
    border-image: url('https://cdn.bitdegree.org/learn/border-img-5.png?229dfb2d') 20 stretch;
}

See the common steps of adding the CSS image borders:

1. The border-image property loads the image by using the provided file path.
2. Then, the image is sliced into sections. As a result, CSS generates separate corners and side border images.
3. Then, CSS places the image corners at the corners of the border.
4. The sections in between the corners are then stretched out from one corner to another.

Note: the border-image will work properly only if the element has border property.

Creating Borders From One Repeating Image

You do not have to stretch images to fill in the borders. Instead, this example repeats the image border to fill the line:

#borderimage {  	    
    border: 30px solid transparent; 
    padding: 5px; 
    border-image: url('https://cdn.bitdegree.org/learn/border-img-5.png?229dfb2d') 20 round;
}

Here we see that image acting as a border!

Changing Slice Values

Understanding the border-image-slice can be difficult. The property divides the border images into nine parts that become the element borders.

In the short code examples below, you see that the first line indicates the slicing in pixels. It means that all images are sliced the same regardless of their size.

When CSS accepts percentages, the slicing is relative to the image size.

border-image: url(doggo.png) 20 round;

border-image: url(doggo.png) 10% round;

border-image: url(doggo.png) 30% round;

Here is the full code with the examples above:

#borderimage1 {    
    border: 5px solid transparent;      	
    padding: 10px;     
    border-image: url('https://cdn.bitdegree.org/learn/border-img-5.png?229dfb2d') 20 round;
}

#borderimage2 { 
    border: 15px solid transparent;    
    padding: 20px;      		
   border-image: url('https://cdn.bitdegree.org/learn/border-img-5.png?229dfb2d') 10% round;
}  	

#borderimage3 {    
    border: 20px solid transparent;      	
    padding: 10px;    
    border-image: url('https://cdn.bitdegree.org/learn/border-img-5.png?229dfb2d') 20% round;
}

CSS Border Image: Summary

• You can use CSS gradients as border images.
• The border-image does not work with table elements when border-collapse has the collapse value.