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

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

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

Синтаксис

селектор {
	border-image-outset: положительное число;
}

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

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

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

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

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

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

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

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

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

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