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

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

Попробуйте

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

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

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

Это сокращённое свойство сбрасывается сокращённым свойством CSS border, которое задаёт всем свойствам полной записи их начальные значения.

Синтаксис

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

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

Свойство border-image можно задать одним — пятью значениями из перечисленных ниже.

Значения

<'border-image-source'>

Исходное изображение. См. border-image-source.

<'border-image-slice'>

Размеры для разделения исходного изображения на области. Можно указать до четырёх значений. См. border-image-slice.

<'border-image-width'>

Ширина изображения рамки. Можно указать до четырёх значений. См. border-image-width.

<'border-image-outset'>

Расстояние от изображения рамки до внешнего края элемента. Можно указать до четырёх значений. См. border-image-outset.

<'border-image-repeat'>

Определяет, как изменяются краевые области исходного изображения, чтобы соответствовать размерам изображения рамки. Можно указать до двух значений. См. border-image-repeat.

Доступность

Вспомогательные технологии не могут интерпретировать изображения рамок. Если изображение содержит сведения, важные для понимания общего назначения страницы, лучше описать их семантически в документе.

• MDN: пояснения к руководству 1.1 «Понимаем WCAG»

• [Понимание критерия успеха 1.1.1

  Понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)

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

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

border-image = 
  <'border-image-source'> ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? ||
  <'border-image-repeat'>

Примеры

Растровое изображение

В этом примере мы применим ромбовидный узор к рамкам элемента. В качестве исходного изображения рамки используется файл «.png» размером 81 на 81 пиксель с тремя ромбами по вертикали и горизонтали:

HTML

<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

CSS

Чтобы размер соответствовал одному ромбу, мы разделим 81 на 3 и используем значение 27 для разделения изображения на угловые и краевые области. Чтобы расположить изображение рамки по центру края фона элемента, значения отступа за пределы рамки сделаем равными половине значений ширины. Наконец, значение повтора round обеспечит равномерное размещение фрагментов рамки — без обрезки и промежутков.

#bitmap {
  width: 200px;
  background-color: #ffffaa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

Результат

Градиент

HTML

<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>

CSS

#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px)
    60;
  padding: 20px;
}

Результат

Скруглённые рамки

border-radius не влияет на изображение рамки. Это связано с тем, что свойство border-image-outset позволяет разместить изображение за пределами рамки элемента, поэтому обрезать изображение рамки по области рамки не имеет смысла. Чтобы создать скруглённые рамки при использовании изображения рамки, следует создать само изображение со скруглёнными углами или, если используется градиент, нарисовать его в качестве фона. Ниже показан один из способов сделать это — использовать два свойства background-image: одно распространяется на область рамки, а другое — на область внутренних отступов.

HTML

<div id="rounded">
  This element is surrounded by a border image with rounded corners!
</div>

CSS

#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Результат

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

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

См. также

• border
• outline
• box-shadow
• background-image
• <url> тип
• Функции градиента: conic-gradient(), repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• Изображения рамок в CSS: одна из ключевых областей Interop 2023 в блоге MDN (2023)