Својство border-image-width

Својство border-image-width управља ширином видљивог дела ивице, скалира је. Ако је ова вредност већа од ширине border-width, слика ивице ће се увући испод садржаја.

За више детаља погледајте својство border-image.

Синтакса

селектор {
	border-image-width: CSS јединице | проценти | број | auto;
}

Вредности

Вредност	Опис
CSS јединице	Вредност у задатим CSS јединицама.
Проценти	Вредности у процентима у односу на величину блока коме је задата ивица.
Број	Бројевна вредност, којом се множи `border-width`.
`auto`	Кључна реч. Ако је задата, вредност је једнака одговарајућој `border-image-slice`. Ако нема одговарајуће величине, користи се вредност `border-width`, при чему слика заузима цео угао ивице, увлачећи се под садржај. Погледајте примере за боље разумевање.

Подразумевана вредност: 1.

Пример . Број

Поставићемо вредност border-image-width на 2 при прелазу мишем преко елемента. Притом ивица ће постати величине 26px*2 - 2 пута већа него њена ширина задата у border-width. Ивица ће се при томе увући под текст (као позадина):

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

Пример . Променимо border-image-repeat на round

У претходном примеру, при прелазу, у ивици неће бити цео број ромбића. Исправимо то, постављајући border-image-repeat на вредност 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;
}

Пример . Проценти

Поставићемо вредност border-image-width на 50% при прелазу мишем преко елемента. Притом ивица ће постати величине 50% од величине блока (то јест две ивице, десна и лева, покриће цео блок):

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

Пример . Проценти

Поставићемо вредност border-image-width на 30% при прелазу мишем преко елемента. Притом ивица ће постати величине 30% од величине блока:

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

Пример . Пиксели

Поставићемо вредност border-image-width на 50px при прелазу мишем преко елемента:

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

Пример . Вредност auto

Поставићемо вредност border-image-width на auto при прелазу мишем преко елемента.

Пре прелаза border-image-width има вредност 1 (подразумевано). У примеру је специјално border-width задато на 52px, а border-image-slice - на вредности 26 (ефекат са auto ће се видети само ако border-width није једнако border-image-slice). Због тога што border-image-width има вредност 1, слика ивице ће заузимати целу ширину border-width, то јест растегнуће се на 52px. При прелазу вредност border-image-width поставиће се на auto и ширина слике ће постати једнака вредности border-image-slice, то јест 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;
}

Погледајте такође

својство border-image,
које је скраћеница за ивицу-слику
својство border-image-source,
које задаје пут до слике за ивицу
својство border-image-slice,
које разбија слику за ивицу
својство border-image-repeat,
које понавља слику за ивицу
својство border-image-outset,
које задаје помак слике за ивицу