Vlastnosť border-image-outset

Vlastnosť border-image-outset umožňuje posunúť rámček za hranice elementu. Ako hodnota sa uvádza číslo bez uvedenia merných jednotiek alebo akékoľvek jednotky pre veľkosti, okrem percent. Ak je uvedené číslo bez jednotiek, potom je to multiplikátor, ktorým sa násobí hodnoty vlastnosti border-width. Záporné hodnoty nie sú podporované.

Pre podrobnejšie informácie o obrázkoch pre okraj pozri vlastnosť border-image.

Syntax

selektor {
	border-image-outset: kladné číslo;
}

Príklad . Číslo

Nastavme hodnotu border-image-outset na 3 pri prejdení myšou nad element. V tom prípade sa okraj posunie o 26px*3 - 3 krát ďalej, ako je jej šírka, zadaná v 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;
}

Príklad . Pixely

Nastavme hodnotu border-image-outset na 30px pri prejdení myšou nad element. V tom prípade sa okraj posunie o 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;
}

Pozri tiež

vlastnosť border-image,
ktorá je skratkou pre obrázok okraja
vlastnosť border-image-source,
ktorá nastavuje cestu k obrázku pre okraj
vlastnosť border-image-slice,
ktorá rozdeľuje obrázok pre okraj
vlastnosť border-image-repeat,
ktorá opakuje obrázok pre okraj
vlastnosť border-image-width,
ktorá nastavuje veľkosť obrázku pre okraj