Vlastnost border-image-outset

Vlastnost border-image-outset umožňuje posunout ohraničení za hranice elementu. Jako hodnota se uvádí číslo bez jednotek měření nebo jakékoli jednotky pro velikosti, kromě procent. Je-li uvedeno číslo bez jednotek, je to násobitel, kterým se vynásobí hodnota vlastnosti border-width. Záporné hodnoty nejsou podporovány.

Pro podrobnější informace o obrázcích pro ohraničení viz vlastnost border-image.

Syntaxe

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

Příklad . Číslo

Nastavme hodnotu border-image-outset na 3 při najetí myší na element. Při tom se ohraničení posune o 26px*3 - 3 krát dále, než je jeho šířka, nastavená 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;
}

Příklad . Pixely

Nastavme hodnotu border-image-outset na 30px při najetí myší na element. Při tom se ohraničení posune 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;
}

Viz také

vlastnost border-image,
která je zkratkou pro ohraničení-obrázek
vlastnost border-image-source,
která nastavuje cestu k obrázku pro ohraničení
vlastnost border-image-slice,
která rozdělení obrázku pro ohraničení
vlastnost border-image-repeat,
která opakování obrázku pro ohraničení
vlastnost border-image-width,
která nastavuje velikost obrázku pro ohraničení