Vlastnosť border-image-source

Vlastnosť border-image-source nastavuje obrázok pre okraj. Pre podrobnejšie informácie pozrite si vlastnosť border-image.

Syntax

selektor {
	border-image-source: url(cesta k obrázku);
}

Príklad

Vlastnosť border-image-source by sa mala nastavovať spolu s border-image-slice:

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Príklad

Ak nie je nastavená vlastnosť border-image-slice, celý obrázok sa umiestni do rohov (pretože border-image-slice má predvolenú hodnotu 100%):

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

#elem {
	border-image-source: url("image.png");
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Príklad

Namiesto obrázka je možné nastaviť lineárny gradient:

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

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-image-slice: 30;
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

Príklad

Ak nie je nastavená vlastnosť border-image-slice, gradient sa umiestni do rohov (pretože border-image-slice má predvolenú hodnotu 100%):

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

#elem {
	border-image-source: linear-gradient(to bottom, red, blue);
	border-width: 30px;
	border-style: solid;
	background: green;
	height: 200px;
	width: 200px;
	margin: 0 auto;
}

Príklad

Ak nastavíte vlastnosť border-radius, okraje sa, žiaľ, nezaokrúhlia (aj v prípade gradientu), hoci efekt bude tiež celkom zaujímavý:

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

#elem {
	border-radius: 100px;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Pozrite tiež

vlastnosť border-image,
ktorá je skratkou pre obrázok okraja
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ázka pre okraj
vlastnosť border-image-outset,
ktorá nastavuje posun obrázka pre okraj