Свойство CSS border-image-source

Свойство CSS border-image-source задаёт изображение-источник для создания рамки элемента.

Свойство border-image-source является одним из свойств CSS3.

Если значение установлено в «none» или изображение не может быть отображено, будут использоваться стили рамки.

Начальное значение	none
Применяется к	Ко всем элементам, кроме внутренних элементов таблицы, когда border-collapse имеет значение «collapse». Также применяется к ::first-letter.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.borderImageSource = "url()";

Синтаксис

Значения CSS border-image-source

css

border-image-source: none | image | initial | inherit;

Пример свойства border-image-source:

Пример кода CSS border-image-source

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Результат

CSS border-image-source description

Значения

Значение	Описание
none	Изображение не будет применено.
image	Путь к изображению применяется в качестве рамки.
initial	Устанавливает свойству его значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Как правильно использовать свойство border-image-source в CSS?

Свойство border-image-source можно использовать с URL для указания пути к изображению.Свойство border-image-source может включать цветовой код в качестве значения.Свойство border-image-source указывается с ключевым словом 'none', когда изображение не используется.Свойство border-image-source может принимать ряд чисел в качестве значения для настройки ширины рамки.

Свойство CSS border-image-source ​

Синтаксис ​

Пример свойства border-image-source: ​

Результат ​