Свойство border-image-repeat

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

Синтаксис

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

Значения

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

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

Количество параметров

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

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

<div id="elem"></div>

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

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

<div id="elem"></div>

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

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

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

<div id="elem"></div>

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

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

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

<div id="elem"></div>

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

Смотрите также

свойство border-image,
которое является сокращением для границы-картинки
свойство border-image-source,
которое задает путь к картинке для границы
свойство border-image-slice,
которое разбиение картинки для границы
свойство border-image-width,
которое задает размер картинки для границы
свойство border-image-outset,
которое задает сдвиг картинки для границы