border-image-source

Summary

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.

• Initial value none
• Applies to all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
• 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

/* 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;

Values

none

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

<image>

Image reference to use for the border.

Formal syntax

none | <image>

Examples

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

Specifications

Browser compatibility

See also

• border-image related CSS properties: border-image, border-image-source, border-image-width, border-image-slice, border-image-repeat, border-image-outset