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

Syntax

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

Examples

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


Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) Not supported Not supported Not supported

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA 15.0 (15.0) Not supported NA NA

Relative articles