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

Синтаксис

селектор {
	border-image: url(source) slice/width/outset repeat | inherit | none;
}
селектор {
	border-image: url(путь к картинке) смещение/толщина/сдвиг повторение;
}

Картинка, которую мы хотим применить для границы, должна быть оформлена специальным образом: 4 мини картинки для уголков и 4 картинки для сторон. Пример такой картинки:

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

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

Картинка "разрезается" на кусочки следующим образом: для значения slice указывается от одного до четырех значений. Давайте разберем на примере. Пусть указаны следующие значения: 10 20 30 40 (пиксели px не указываются, это связано с тем, что картинка может быть и растровой и векторной). Значения говорят о следующем: 10 - 10px отрезать сверху, 20 - 20px отрезать справа, 30 - 30px отрезать снизу, 40 - 40px отрезать слева. Какая часть картинки попадет в левый верхний углок? Это будет кусочек: 10px сверху, 40px слева. В правый верхний уголок попадет 10px сверху, 20px справа. И так далее.

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

Свойство 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

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

Результат выполнения кода:

Пример . border-image-repeat: значение stretch

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

Результат выполнения кода:

Пример . border-image-repeat: значение round

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

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

Результат выполнения кода:

Пример . border-image-repeat: два слова

Значение repeat для ширины и stretch для высоты:

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

Результат выполнения кода:

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

Увеличим border-width по наведению мышкой, при этом толщину border-image оставим такой же. Ромбики растянутся на всю границу:

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

Результат выполнения кода:

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

Возьмем другую картинку, в которой разные кусочки не равны:

Укажем, какие части от картинки нужно отрезать - 25% 30% 10% 20%. Работает это так: 25% - отступ сверху, 30% - отступ справа, 10% - отступ снизу, 20% - отступ слева. По сути этими кусочками мы отрезаем уголки. Верхний левый уголок будет 25% сверху картинки, и 20% слева. Верхний правый уголок будет 25% сверху картинки, и 30% справа и так далее.

Также, если вы наведете мышкой на блок, то сработает ключевое слово fill, и центральная часть картинки станет фоном нашего блока.

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Пример

Сделаем градиентную границу с помощью градиента (как работает градиент - смотрите по ссылке):

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

Результат выполнения кода:

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

Установим значение border-image-width в 2 (картинка границы станет в 2 раза больше самой границы) по наведению мышкой на элемент (26/2 - указали после слеша, при этом 26 - это значение border-image-slice). Обратите внимание на то, что сама граница не увеличилась, а картинка границы - да, так как она залезет под текст:

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.