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

Свойство CSS border-image-outset определяет величину, на которую изображение границы выходит за пределы рамки (border box) элемента. Это одно из свойств CSS3. Свойство border-image-outset принимает от одного до четырёх значений.

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

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

Синтаксис

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

css

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

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

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("https://ru.w3docs.com/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 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-outset

Значения

Значение	Описание	Запустить
length	Определяет расстояние от краёв, на котором будет отображаться border-image. Значение по умолчанию — 0.	Запустить »
number	Размер отступа border-image в виде кратного значения соответствующих ширин границ элемента.	Запустить »
initial	Устанавливает свойству его значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

В чём назначение свойства 'border-image-outset' в CSS?

Оно используется для установки изображения границы элемента.Оно используется для изменения цвета фона элемента.Оно используется для расширения области изображения границы за пределы границы элемента.Оно используется для ограничения области изображения границы внутри границы элемента.Оно используется для установки размера шрифта элемента.

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

Синтаксис ​

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

Результат ​