border-image-source

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 type	discrete

Синтаксис

css

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

Значения

none: Specifies that no image should be used for the border. Instead the style defined by border-style is used.
<image>: Ссылка на изображение, которое будет использоваться в отрисовке границы.

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

border-image-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

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

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

Примеры

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

Спецификации

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

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

BCD tables only load in the browser