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

cssselektor {
  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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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