Својство 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,
које задаје величину слике за ивицу