border-image-source

This property defines which image should be used as a basis for creating an element’s border image.

Syntax

The image specified by border-image-source is split into 9 regions (see border-image-slice) which are then used to create the final border-image.

/* Specifying a path to an image to be used as a border-image */
border-image-source: url("border-image.png");

Values

image
A path to an image to be used as the source image for the border.

none
The border image won’t be used and the styling applied to the border (border-style) will be used instead.

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-source? Submit a codepen.io demo and we'll showcase it here ↴