border-image

The border-image property allows for an image to be used as the border around the element.

Syntax

The border-image property is a shorthand CSS property for setting border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. This property can have anywhere from one to all five values set.

/* setting the border-image-source to be the border-image.png file, 
with the border-image-slice set to 25 
and the border-image-repeat set to round  */
border-image: url("border-image.png") 25 round;
/* setting all 5 values of border-image: */
border-image: url("border-image.png") 25 / 5px / 6px / stretch;

Values

border-image-source
This property defines the path to the image that should be used as a border.

border-image-slice
This property defines how the border image should be sliced.

border-image-width
The width value of the border image used.

border-image-outset
A value that defines how much the border image area should extend outside of the border box.

border-image-repeat
A value that defines how much the border image area should extend outside of the border box.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-image? Submit a codepen.io demo and we'll showcase it here ↴