Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.


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.

Примечание: 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.

Начальное значениеnone
Применяется квсе элементы, кроме внутренних табличных элементов, когда border-collapse:collapse. Это также применяется к ::first-letter.
Обработка значенияnone или изображение с абсолютным URI
Animation typediscrete


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

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



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


Ссылка на изображение, которое будет использоваться в отрисовке границы.

Формальный синтаксис

border-image-source = 
none |

<image> =
<url> |

<url> =
<url()> |

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

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


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


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

Совместимость с браузерами

BCD tables only load in the browser