W3cubDocs

/CSS

border-image-source

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.

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. It also applies to ::first-letter.
Inherited no
Computed value none or the image with its URI made absolute
Animation type discrete

Formal syntax

border-image-source = 
none |
<image>

<image> =
<url> |
<gradient>

Examples

Basic example

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
border-image-source
15
12
15
11
15
6
4.4
18
15
14
6
1.0

See also

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source