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

CSS свойство border-image-width устанавливает толщину границы-изображения.

Свойство border-image-width может иметь от одного до четырех значений - top, right, bottom и left.

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

Если установлены две значения, первое из них применяется для верхней и нижней стороны, а второе для левой и правой стороны.

Если установлены три значения, первое применяется для верхней стороны, второе для левой и правой, а третье для нижней стороны.

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

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

Синтаксис

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

Пример

<!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</h1>
    <p class="border">Здесь установлено 20px для border-image-width.</p>
  </body>
</html>

Другой пример, где можно увидеть, что изменится, если применены одно, две,три или четыре значения:

Пример

<!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>Пример border-image-width</h1>
    <p class="border1">Здесь установлено 20px для border-image-width.</p>
    <p class="border2">Здесь установлено 20px и 10px для border-image-width.</p>
    <p class="border3">Здесь установлено 20px 10px and 40px для border-image-width. </p>
    <p class="border4">Здесь установлено 20px 10px, 40px и 55px для border-image-width.</p>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
15.0+ 13.0+ 6.0+ 15.0+

Практикуйте свои знания

What does the border-image-width CSS property do?
Считаете ли это полезным?