border-image-source property CSS Reference

Definition and Usage

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.

  • Initial none
  • Applies to all elements, except internal table elements when border-collapse is collapse
  • Inherited no
  • Media visual
  • Computed Value none or the image with its URI made absolute
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: none | <image>
border-image-source: none                                  /* no border-image, use the specified border-style */
border-image-source: url(image.jpg)                        /* the image.jpg is used as image */
border-image-source: linear-gradient(to top, red, yellow)  /* a gradient is used as image */
border-image-source: inherit


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


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15.015.0 (15.0)Not supportedNot supportedNot supported

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportNA15.0 (15.0)Not supportedNANA

Relative articles