border-image-source CSS

Свойство border-image-source определяет изображение вместо стиля границы.

Если это свойство установлено в none, вместо него используется стиль, определяемый border-style.

Свойство **`border-image-source`** определяет изображение вместо стиля границы. Если это свойство установлено в `none`, вместо него используется стиль, определяемый [`border-style`](/css/border-style/).
Значение по умолчанию:

none

Значение по умолчанию:
`none`
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Backgrounds and Borders Module Level 3](https://drafts.csswg.org/css-backgrounds-3/#border-image-source)
Поддержка браузерами:

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="border-image" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=border-image">Can I Use border-image?</a> Data on support for the border-image feature across the major browsers from caniuse.com. </p>

Синтаксис

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

Синтаксис

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

Содержание

  • Синтаксис
      /* 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;
  • Значения
    • Примеры

      В начало