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

Свойство border-image-outset

Если указано одно значение, оно указывает все четыре отступы.
Если указаны две значения, первое указывает верхний и нижний отступ, а второе - правый и левый отступ.
Если указаны три значения, первое указывает верхний отступ, второе - правый и левый , а третье устанавливает нижний отступ.
Если указаны четыре значения, они устанавливают верхний, правый, нижний и левый отступ в указанном порядке.

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

Синтаксис

border-image-outset: length | number | initial | inherit;

Пример

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

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

Значения

Значение	Описание
length	Указывает, на каком расстоянии от краев будет отображено граница-изображение. Значение по умолчанию - 0.
number	Числовое значение, на которое умножается border-width.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.