Свойство border-image

Свойство border-image задава картинка за граница, то е свойство съкращение за свойствата border-image-source, border-image-slice, border-image-repeat, border-image-width и border-image-outset. При това свойство-съкращение се появи в CSS по-рано от съкращаваните свойства и затова се поддържа в по-голям брой стари браузъри.

Синтаксис

селектор {
	border-image: url(път към картинка) отместване/дебелина/отстъп повторение;
}

Описание

Картинката, която искаме да приложим за граница, трябва да бъде оформена по специален начин: 4 мини картинки за ъглите и 4 картинки за страните. Пример за такава картинка:

В този случай централната част е оставена бяла (тъй като не искаме да попадне на фона на елемента). Пример за картинка с попълнена централна част:

Стойността slice указва на браузъра, кои части от картинката ще отидат за ъглите, а кои за страните (и коя част ще бъде централна). За ъглите отиват 4 части, за страните отиват 4 части и една част (централната) отива за фона на елемента (по избор, ключовата дума fill).

Картинката се "разрязва" на парчета по следния начин: за стойността slice се посочва от една до четири стойности. Нека разгледаме с пример. Нека са указани следните стойности: 10 20 30 40 (пиксели px не се посочват, това е свързано с факта, че картинката може да бъде както растерна, така и векторна). Стойностите казват следното: 10 отрязано отгоре, 20 отрязано отдясно, 30 отрязано отдолу, 40 отрязано отляво. Коя част от картинката ще попадне в левия горен ъгъл? Това ще бъде парченце: 10 отгоре, 40 отляво. В десния горен ъгъл ще попадне 10 отгоре, 20 отдясно. И така нататък.

Най-често картинката е симетрична (като ромбичетата по-горе) и трябва да отрежем равни парченца за ъглите. В такъв случай се посочва една стойност, която ще задава еднакви отмествания от всички страни. За да отрежем оранжевите ромбичета, ще посочим slice като 26 (тъй като оранжевото ромбиче има размер 26px на 26px). Жълтите ромбичета ще попаднат на линиите на границата и с тях ще се случи следното: те или ще се разтегнат по целия блок или ще се повтарят по границата (зависи от стойността repeat):

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

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

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

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

Свойството border-image не позволява да се укаже дебелината на границата на елемента. Браузърът просто разтяга изображението по границата с вече наличната ширина. Затова тя трябва да се задава чрез свойството border.

Потребителите на стари браузъри (или с изключени картинки) ще видят стандартна рамка, зададена в border, затова има смисъл да се задават подходящи стил и цвят.

Стойности

Стойност	Описание
url(Път към картинка)	Път към картинката. Подробно вижте `border-image-source`.
отместване	Указва на браузъра, кои части от картинката ще отидат за ъглите, а кои за страните (и коя част ще бъде централна). Възможни стойности: от `1`-во до `4`-ти числа \| от `1`-во до `4`-ти процента. Чрез интервал може да се задава ключова дума `fill` в допълнение към числата или процентите. Подробно вижте `border-image-slice`.
дебелина	Свойството управлява ширината на видимата част от рамката, мащабира я. Ако тази стойност е по-голяма от ширината `border-width`, картинката на рамката ще се промъкне под съдържанието. Възможни стойности: CSS единици \| проценти \| число \| `auto`. Подробно вижте `border-image-width`.
отстъп	Интересно свойство, позволяващо отдалечаване на рамката извън елемента. Отрицателни стойности не се поддържат. Възможни стойности: CSS единици (освен % (?)) \| положително число \| auto. Подробно вижте `border-image-outset`.
повторение	Указва как да се повтаря картинката на границите (не на ъглите): да се плочи или разтяга. Възможни стойности: `stretch` \| `repeat` \| `round` \| `space`. Подробно вижте `border-image-repeat`.

Стойност по подразбиране: none 100%/1/0 stretch (url(път към картинка) отместване/дебелина/отстъп повторение).

Пример . border-image-repeat: стойност repeat

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

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

Пример . border-image-repeat: стойност stretch

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

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

Пример . border-image-repeat: стойност round

В момента в нормално състояние е зададена стойност repeat, а при посочване - round. Обърнете внимание, че преди посочване в границата се побира не цял брой ромбичета, а след посочване - цял. Така работи round:

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

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

Пример . border-image-repeat: две думи

Стойност repeat за ширина и stretch за височина:

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

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

Пример . Съвпадение на ширината на картинката с ширината на границата

Увеличаваме border-width при посочване с мишката, като дебелината на border-image оставяме същата. Ромбичетата ще се разтегнат по цялата граница:

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

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

Пример . border-image-slice

Вземаме друга картинка, в която различните парченца не са равни:

Указваме кои части от картинката трябва да се отрежат - 25% 30% 10% 20%. Работи така: 25% - отстъп отгоре, 30% - отстъп отдясно, 10% - отстъп отдолу, 20% - отстъп отляво. По същество с тези парченца отрязваме ъглите. Горният ляв ъгъл ще бъде 25% отгоре на картинката, и 20% отляво. Горният десен ъгъл ще бъде 25% отгоре на картинката, и 30% отдясно и така нататък.

Също така, ако посочите с мишката върху блока, то ще се задейства ключовата дума fill, и централната част на картинката ще стане фон на нашия блок:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Пример

Правим градиентна граница с помощта на линеен градиент:

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

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

Пример . border-image-width

Задаваме стойност border-image-width на 2 (картинката на границата ще стане 2 пъти по-голяма от самата граница) при посочване с мишката върху елемента (26/2 - указано след наклонена черта, като 26 - това е стойността border-image-slice). Обърнете внимание на това, че самата граница не се е увеличила, а картинката на границата - да, тъй като ще се промъкне под текста:

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

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

Пример . border-image-outset

Задаваме стойност border-image-outset на 3 при посочване с мишката върху елемента. (26/1/2 - указано след втората наклонена черта, като 26 - това е стойността border-image-slice, а - 1 - border-image-width):

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

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

Вижте също

свойство border-image-source,
което задава път към картинката за границата
свойство border-image-slice,
което задава разрязване на картинката за границата
свойство border-image-repeat,
което задава повторение на картинката за границата
свойство border-image-width,
което задава размер на картинката за границата
свойство border-image-outset,
което задава отместване на картинката за границата