Свойство 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,
което задава размер на изображението за границата