Vlastnosť border-image-width

Vlastnosť border-image-width riadi šírku viditeľnej časti okraja, zmenšuje alebo zväčšuje ju. Ak je táto hodnota väčšia ako šírka border-width, obrázok okraja prekryje obsah.

Pre podrobnejšie informácie pozrite si vlastnosť border-image.

Syntax

selektor {
	border-image-width: CSS jednotky | percentá | číslo | auto;
}

Hodnoty

Hodnota	Popis
CSS jednotky	Hodnota v zadaných CSS jednotkách.
Percentá	Hodnoty v percentách relatívne k veľkosti bloku, ktorému je zadaný okraj.
Číslo	Číselná hodnota, ktorou sa vynásobí `border-width`.
`auto`	Kľúčové slovo. Ak je zadané, hodnota sa rovná príslušnému `border-image-slice`. Ak neexistuje vhodná veľkosť, použije sa hodnota `border-width`, pričom obrázok vyplní celý roh okraja a prekryje obsah. Pre lepšie pochopenie si pozrite príklady.

Predvolená hodnota: 1.

Príklad . Číslo

Nastavme hodnotu border-image-width na 2 pri prejdení myšou nad prvok. Okraj bude mať potom veľkosť 26px*2 - 2 krát väčšiu ako je jej šírka zadaná v border-width. Okraj pri tom prekryje text (ako keby bol pozadím):

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

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

Príklad . Zmeňme border-image-repeat na round

V predchádzajúcom príklade bude pri prejdení myšou v okraji necelý počet kosoštvorcov. Napravme to nastavením border-image-repeat na hodnotu round:

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

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

Príklad . Percentá

Nastavme hodnotu border-image-width na 50% pri prejdení myšou nad prvok. Okraj bude mať potom veľkosť 50% od veľkosti bloku (to znamená, že dva okraje, pravý a ľavý, pokryjú celý blok):

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

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

Príklad . Percentá

Nastavme hodnotu border-image-width na 30% pri prejdení myšou nad prvok. Okraj bude mať potom veľkosť 30% od veľkosti bloku:

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

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

Príklad . Pixely

Nastavme hodnotu border-image-width na 50px pri prejdení myšou nad prvok:

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

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

Príklad . Hodnota auto

Nastavme hodnotu border-image-width na auto pri prejdení myšou nad prvok.

Pred prejdením myšou má border-image-width hodnotu 1 (predvolená). V príklade je zámerne border-width nastavené na 52px, a border-image-slice - na hodnote 26 (efekt s auto bude pozorovaný len ak border-width nie je rovné border-image-slice). Kvôli tomu, že border-image-width má hodnotu 1, obrázok okraja bude zaberať celú šírku border-width, teda natiahne sa na 52px. Pri prejdení myšou sa hodnota border-image-width nastaví na auto a šírka obrázku sa bude rovnať hodnote border-image-slice, teda 26px:

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

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

Pozri tiež

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