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!

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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.