Vlastnost border-image-width

Vlastnost border-image-width řídí šířku viditelné části ohraničení, mění její měřítko. Pokud je tato hodnota větší než šířka border-width, obrázek ohraničení vleze pod obsah.

Pro podrobnější informace viz vlastnost border-image.

Syntaxe

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

Hodnoty

Hodnota	Popis
CSS jednotky	Hodnota v zadaných CSS jednotkách.
Procenta	Hodnoty v procentech vzhledem k velikosti bloku, kterému je nastaveno ohraničení.
Číslo	Číselná hodnota, kterou se násobí `border-width`.
`auto`	Klíčové slovo. Pokud je zadáno, hodnota je rovna příslušnému `border-image-slice`. Pokud není vhodná velikost k dispozici, použije se hodnota `border-width`, přičemž obrázek vyplní celý roh ohraničení a vleze pod obsah. Pro lepší pochopení viz příklady.

Výchozí hodnota: 1.

Příklad . Číslo

Nastavme hodnotu border-image-width na 2 při najetí myší na element. Přitom ohraničení bude mít velikost 26px*2 - 2 krát větší, než je jeho šířka nastavená v border-width. Ohraničení přitom vleze pod text (jako druh pozadí):

<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;
}

Příklad . Změňme border-image-repeat na round

V předchozím příkladu bude při najetí v ohraničení necelý počet kosočtverců. Opravme 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;
}

Příklad . Procenta

Nastavme hodnotu border-image-width na 50% při najetí myší na element. Přitom ohraničení bude mít velikost 50% od velikosti bloku (to znamená, že dvě ohraničení, pravé a levé, 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;
}

Příklad . Procenta

Nastavme hodnotu border-image-width na 30% při najetí myší na element. Přitom ohraničení bude mít velikost 30% od velikosti 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;
}

Příklad . Pixely

Nastavme hodnotu border-image-width na 50px při najetí myší na element:

<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;
}

Příklad . Hodnota auto

Nastavme hodnotu border-image-width na auto při najetí myší na element.

Před najetím má border-image-width hodnotu 1 (ve výchozím nastavení). V příkladu je speciálně border-width nastaveno na 52px, a border-image-slice - na hodnotě 26 (efekt s auto bude pozorován pouze pokud border-width není rovno border-image-slice). Kvůli tomu, že border-image-width má hodnotu 1, obrázek ohraničení bude zabírat celou šířku border-width, to znamená, že se roztáhne na 52px. Při najetí se hodnota border-image-width nastaví na auto a šířka obrázku se bude rovnat hodnotě border-image-slice, tedy 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;
}

Viz také

vlastnost border-image,
která je zkratkou pro obrázkové ohraničení
vlastnost border-image-source,
která nastavuje cestu k obrázku pro ohraničení
vlastnost border-image-slice,
která rozděluje obrázek pro ohraničení
vlastnost border-image-repeat,
která opakuje obrázek pro ohraničení
vlastnost border-image-outset,
která nastavuje posun obrázku pro ohraničení