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

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

Если установлено значение "none" или изображение не может быть отображено, будут использованы стили границ.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .border { 
      border: 10px solid transparent;
      padding: 15px;
      border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");  
      border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства border-image-source</h2>
    <p class="border">Привет Мир!</p>
    <p>Оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%">
  </body>
</html>

Попробуйте сами!

Значения

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