Svojstvo border-image-outset

Svojstvo border-image-outset omogućava da se okvir pomera izvan granica elementa. Kao vrednost se navodi broj bez navođenja jedinica merenja ili bilo koje jedinice za veličine, osim procenata. Ako je naveden broj bez jedinica, onda on predstavlja množitelj, sa kojim se množe vrednosti svojstva border-width. Negativne vrednosti nisu podržane.

Za detaljnije informacije o slikama za ivicu pogledajte svojstvo border-image.

Sintaksa

selektor {
	border-image-outset: pozitivan broj;
}

Primer . Broj

Podesimo vrednost border-image-outset na 3 pri prelasku miša preko elementa. Pri tome će se ivica pomeriti za 26px*3 - za 3 puta dalje od njene širine, zadate u 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;
}

Primer . Pikseli

Podesimo vrednost border-image-outset na 30px pri prelasku miša preko elementa. Pri tome će se ivica pomeriti za 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;
}

Vidi takođe

svojstvo border-image,
koje je skraćenica za sliku-ivicu
svojstvo border-image-source,
koje zadaje putanju do slike za ivicu
svojstvo border-image-slice,
koje deli sliku za ivicu
svojstvo border-image-repeat,
koje ponavlja sliku za ivicu
svojstvo border-image-width,
koje zadaje veličinu slike za ivicu