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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

15.0+ 12.0+ 15.0+ 6.0+ 15.0+


Считаете ли это полезным?

Похожие статьи