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

Mobile browsers