It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Adding CSS Border Images by Using the Border-Image Property

Reading time 3 min
Published Nov 18, 2016
Updated Oct 2, 2019

TL;DR – CSS border images refer to images that you add as borders of HTML elements.

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:
CSS Border Image

Here we see the image as a border!

This shorthand property combines these parameters in one declaration:

Property Description
border-image Shorthand property you can use for creating an image border
border-image-source Specifies the directory path for the required image
border-image-slice Specifies how the border image should be sliced
border-image-width Specifies the width of the border image
border-image-outset Specifies the distance between the border and the surrounding elements
border-image-repeat Specifies the way image is repeated in the border: rounded, stretched, spaced

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:

Example
#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:

Example
#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.

Example No.1

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

Example no.2

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

Example no.3

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

Here is the full code with the examples above:

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

#borderimage2border: 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.