border-image-source

The border-image-source CSS property sets the source image used to create an element's border image.

The border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.

Syntax

/* Keyword value */
border-image-source: none;

/* <image> values */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;

Values

none: No border image is used. The appearance defined by border-style is displayed instead.
<image>: Image reference to use for the border.

Formal definition

Initial value	none
Applies to	All elements, except internal table elements when border-collapse is collapse
Inherited	no
Computed value	the keyword none or the computed <image>
Animation type	discrete

Formal syntax

none | <image>

Examples

Basic example

.box {
  border-image-source: url("image.png");
}

css properties border-image-source