w3docs logo

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

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

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

chrome edge firefox safari opera
15.0+ 12.0+ 15.0+ 6.0+ 15.0+
❮ Назад Вперед ❯
Считаете ли это полезным?