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	Значение элемента наследуется от родительского элемента.