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

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

Когда использовать

border-image-width нужен только тогда, когда у элемента уже задано изображение границы с помощью border-image-source (и, как правило, border-image-slice). Само по себе это свойство ничего не делает.

Важная особенность: border-image-width — это не то же самое, что обычное свойство border-width. Обычное border-width резервирует место в блочной модели и влияет на разметку, тогда как border-image-width управляет лишь тем, насколько широко изображение отрисовывается в области границы. Если сделать изображение шире фактической границы, оно может заходить внутрь поверх отступов или содержимого элемента, не сдвигая при этом другие элементы. Именно поэтому в большинстве примеров сначала задают прозрачную border, а затем задают размер изображения с помощью border-image-width.

Допустимые типы значений

Ширину каждой стороны можно задать несколькими способами:

<length> — фиксированный размер, например 20px.
<number> — множитель для соответствующего border-width. border-image-width: 2 означает «в два раза больше ширины границы». Именно этот тип используется для начального значения 1.
<percentage> — относительно размера области изображения границы (горизонтальные проценты используют ширину, вертикальные — высоту).
auto — использует внутреннюю ширину/высоту соответствующего border-image-slice, или соответствующий border-width, если внутренний размер не задан.

Сколько значений использовать

border-image-width принимает от одного до четырёх значений согласно стандартному сокращённому синтаксису CSS по часовой стрелке:

Одно значение — применяется ко всем четырём сторонам.
Два значения — первое для верхней/нижней стороны, второе для левой/правой.
Три значения — первое для верхней, второе для левой/правой, третье для нижней.
Четыре значения — верхняя, правая, нижняя, левая (по часовой стрелке от верхней).

Если значение опущено, оно зеркалит противоположную сторону: опущенное четвёртое значение копирует второе (левая = правая), опущенное третье копирует первое (нижняя = верхняя), а опущенное второе копирует первое (одно значение заполняет все стороны).

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

Синтаксис

Синтаксис свойства CSS border-image-width

border-image-width: number | % | auto | initial | inherit;

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

Пример свойства CSS border-image-width со значением px

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20;
        border-image-repeat: round;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Border-image-width Example</h1>
    <p class="border">Here the border-image-width is set to 20px.</p>
  </body>
</html>

Попробуйте сами »

Результат

Вот ещё один пример, в котором показано, что изменится при использовании одного, двух, трёх или четырёх значений.

Пример свойства border-image-width с различными значениями:

Пример свойства CSS border-image-width с двумя, тремя и четырьмя значениями

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 40px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px;
      }
      .border4 {
        border: 10px solid transparent;
        padding: 55px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px 55px;
      }
    </style>
  </head>
  <body>
    <h1>The border-image-width Example</h1>
    <p class="border1">Here the border-image-width is set to 20px.</p>
    <p class="border2">Here the border-image-width is set to 20px and 10px.</p>
    <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
    <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
  </body>
</html>

Попробуйте сами »

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

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

border-image-source — задаёт изображение, используемое для границы.
border-image-slice — разрезает исходное изображение на девять областей, из которых формируется граница.
border-image-outset — выдвигает изображение границы за пределы блока границы.
border-width — обычная ширина границы, которую border-image-width умножает при использовании <number>.

Значения

Значение	Описание	Попробуйте
length	Единица длины (px), задающая размер border-width.	Попробуйте »
number	Ширина границы задаётся как кратное значение соответствующего border-width. Не может быть отрицательным, значение по умолчанию — 1.	Попробуйте »
percentage	Вычисляется относительно ширины области изображения границы для горизонтальных отступов и высоты области изображения границы для вертикальных.	Попробуйте »
auto	Ширина границы устанавливается равной внутренней ширине или высоте соответствующего border-image-slice.	Попробуйте »
initial	Устанавливает свойство в значение по умолчанию.	Попробуйте »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство 'border-image-width' в CSS?

Задаёт ширину границы изображения элемента.Позволяет задать изображение, которое будет использоваться в качестве границы.Позволяет увеличивать или уменьшать область изображения границы и имеет четыре значения: верхнее, правое, нижнее и левое.Задаёт фоновое изображение границы.Позволяет оформлять границы с помощью изображений.