Свойство border-image-outset позволяет отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

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

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

Синтаксис

селектор {
	border-image-outset: CSS единицы | положительное число | auto;
}

Значения

Число параметров Описание
CSS единицы Значение в заданных CSS единицах (кроме процентов (?)).
Число Числовое значение, на которое умножается border-width.

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

Примеры

Пример . Число

Установим значение border-image-outset в 3 по наведению мышкой на элемент. При этом граница сдвинется на 26px*3 - в 3 раза дальше, чем ее ширина, заданная в border-width:

#elem:hover {
	border-image-outset: 3;
}
#elem {
	border-image-repeat: repeat;
	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;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример . Пиксели

Установим значение border-image-outset в 30px по наведению мышкой на элемент. При этом граница сдвинется на 30px:

#elem:hover {
	border-image-outset: 30px;
}
#elem {
	border-image-repeat: repeat;
	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;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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