border-image

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

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

/* 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 Обзор WCAG, пояснения к руководству 1.1
• Понимание критерия успеха 1.1.1 | Понимание WCAG 2.0

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

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

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

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

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>       |
  <gradient>  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

В этом примере мы применим диагональный узор к границам элемента. Источником изображения границы является файл ".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: #ffa;
  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, #f33, #3bf, #f33 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)