Baseline: Widely supported

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

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

Try it

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


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



No border image is used. The appearance defined by border-style is displayed instead.


Image reference to use for the border.

Formal definition

Initial valuenone
Applies toall elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Computed valuenone or the image with its URI made absolute
Animation typediscrete

Formal syntax

border-image-source = 
none |

<image> =
<url> |

<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )


Basic example

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


CSS Backgrounds and Borders Module Level 3
# the-border-image-source

Browser compatibility

BCD tables only load in the browser

See also