Својство 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,
које задаје помак слике за границу