Свойство 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 - 10 отрезать сверху, 20 - 20 отрезать справа, 30 - 30 отрезать снизу, 40 - 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,
которое задает сдвиг картинки для границы