border-image-repeat¶

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

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

Демо¶

Фон

Синтаксис¶

/* 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: Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

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

border-image-repeat: stretch;

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

CSS Backgrounds and Borders Module Level 3

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

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