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

См. также border-image-source, border-image-slice, border-image-repeat, border-image-width, border-image-outset.

Синтаксис

селектор {
	border-image-repeat: stretch | repeat | round | space;
}

Значения

Может принимать 1 или 2 параметра. Если задано два параметра, то первый из них будет для верхней и нижней границы, а второй параметр - для левой и правой.

Число параметров Описание
stretch Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat Повторяет рисунок границы.
round Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.
space

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

Примеры

Пример . Значение stretch

#elem {
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0px auto;
}

Результат выполнения кода:

Пример . Значение repeat

#elem {
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0px auto;
}

Результат выполнения кода:

Пример . Значение round

Сейчас в нормальном состоянии установлено значение repeat, а по наведению - round. Обратите внимание что до наведения в границу помещается не целое количество ромбиков, а после наведения - целое. Так и работает round:

#elem:hover {
	border-image-repeat: round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0px auto;
}

Результат выполнения кода:

Пример . Два слова

Значение repeat для ширины и stretch для высоты:

#elem {
	border-image-repeat: repeat stretch;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0px auto;
}

Результат выполнения кода:

См. также примеры на свойство border-image.