Join MDN and developers like you at Mozilla's View Source conference, November 2-4 in Portland, Oregon. Learn more at


The border-image-source CSS property defines the <image> to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead.

Note: Though any <image> can be used with this CSS property, browser support is still limited and some browsers support only images defined using the url() functional notation.


/* no border-image, use the specified border-style */
border-image-source: none;

/* the image.jpg is used as image */
border-image-source: url(image.jpg);

/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);

border-image-source: inherit;


Specifies that no image should be used for the border. Instead the style defined by border-style is used.
Image reference to use for the border.

Formal syntax

none | <image>


See border-image for examples of what the various source values will do.


Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-image-source' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) 11 15 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 15.0 (15.0) Not supported ? ?

See also

Document Tags and Contributors

Last updated by: Sebastianz,