Свойство 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,
което задава отместване на изображението за границата