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

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

Если значение этого свойства больше значения border-width элемента, изображение границы будет выходить за пределы края внутреннего отступа (и/или содержимого).

Попробуйте

border-image-width: 30px;

border-image-width: 15px 40px;

border-image-width: 2.6rem;

border-image-width: 20% 8%;

<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;
}

Синтаксис

/* Keyword value */
border-image-width: auto;

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

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

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

Свойству border-image-width можно задать одно, два, три или четыре значения из списка ниже.

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

Значения

<length-percentage>

Ширина границы, заданная как <length> или <percentage>. Проценты для горизонтальных смещений рассчитываются относительно ширины области изображения границы, а для вертикальных — относительно её высоты. Значение не должно быть отрицательным.

<number>

Ширина границы, заданная как множитель соответствующего значения border-width. Значение не должно быть отрицательным.

auto

Ширина границы становится равной внутренней ширине или высоте (в зависимости от того, что применимо) соответствующего border-image-slice. Если изображение не имеет необходимого внутреннего размера, вместо него используется соответствующее значение border-width.

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

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

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

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Замощение изображения границы

В этом примере создаётся изображение границы на основе следующего файла ".png" размером 90 на 90 пикселей:

Таким образом, диаметр каждого круга в исходном изображении составляет 30 пикселей.

HTML

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

Результат

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

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

См. также

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