Перейти к содержанию

border-image-repeat

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

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

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* top and bottom | left and right */
border-image-repeat: round stretch;

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

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

  • Когда указано одно значение, оно применяет одинаковое поведение ко всем четырем сторонам.
  • Когда указаны два значения, первое применяется к верху, середине и низу, второе — к левому и правому краю.

Значения

stretch

Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.

repeat

Повторяет рисунок границы.

round

Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Значение по-умолчанию:

1
border-image-repeat: stretch;

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

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

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Комментарии