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 |