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

Свойство border-image-outset CSS задаёт расстояние, на которое изображение рамки элемента выступает за его рамку.

Части изображения рамки, отображаемые за пределами рамки элемента с помощью border-image-outset, не вызывают появления полос прокрутки и не реагируют на события мыши.

Попробуйте

border-image-outset: 0;

border-image-outset: 15px;

border-image-outset: 30px;

border-image-outset: 40px;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Синтаксис

/* <length> value */
border-image-outset: 1rem;

/* <number> value */
border-image-outset: 1.5;

/* top and bottom | left and right */
border-image-outset: 1 1.2;

/* top | left and right | bottom */
border-image-outset: 30px 2 45px;

/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;

/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

Для свойства border-image-outset можно указать одно, два, три или четыре значения. Каждое значение — это <length> или <number>. Отрицательные значения недопустимы и приводят к игнорированию объявления border-image-outset.

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

Значения

<length>

Размер выступа border-image в виде длины — числа с единицей измерения.

<number>

Размер выступа border-image как кратное соответствующим border-width элемента. Например, если у элемента задано border-width: 1em 2px 0 1.5rem и border-image-outset: 2, итоговое значение border-image-outset вычисляется как 2em 4px 0 3rem.

Формальное определение

Формальный синтаксис

border-image-outset = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}

Примеры

Выступ изображения рамки за границы

HTML

<div id="outset">This element has an outset border image!</div>

CSS

#outset {
  width: 10rem;
  background: #cceeff;
  border: 1.4rem solid;
  border-image: radial-gradient(#ffff22, #5555ff) 40;
  border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
  margin: 2.1rem;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Фоны и рамки
• Изучаем CSS: фоны и рамки
• Изображения рамок в CSS: одна из ключевых областей Interop 2023 в блоге MDN (2023)