🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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!

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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;
}

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