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

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

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

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

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

См. также border-image-source, border-image-slice, border-image-repeat, border-image-width, border-image-outset и свойство-сокращение border-image.

Синтаксис

С числами и процентами через пробел может стоять ключевое слово fill.

селектор {
	border-image-slice: от 1-го до 4-х чисел | от 1-го до 4-х процентов;
}

Значения

Значение Описание
Проценты Проценты рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
Числа Числа - это пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются.
fill Поведение по умолчанию предполагает то, что центральная часть изображения будет отброшена. Для того чтобы задействовать ее, необходимо использовать ключевое слово fill в дополнение к числам или процентам. Однако, в настоящее время (2015 год) браузеры всегда оставляют центральную часть изображения, и не существует способа убрать ее. Таким образом, если вы не хотите чтобы у html-элемента был установлен фон, то центральная часть картинки должна быть пустой. Но также вы можете использовать это поведение, чтобы создать элемент с красивыми границами и фоном.

Смещение может принимать 1, 2, 3 или 4 параметра. Обратите внимание на то, что единицы измерения для смещения не пишутся (например, просто 20, а не 20px). Также можно задавать толщину в %.

Число параметров Описание
1 Толщина для всех сторон одновременно.
2 1 2; - 1px для верха и низа, 2px для левой и правой.
3 1 2 3; - 1px для верха, 2px для левой и правой, 3px для низа.
4 1 2 3 4; - 1px для верха, 2px для правой, 3px для низа, 4px для левой.

Значение по умолчанию: 100%(?).

Примеры

Пример

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

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

Пример

#elem {
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	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-slice: fill 25% 30% 10% 20%;
}
#elem {
	border-image-source: url("/images/css/border-image-fill.png");
	border-image-slice: 25% 30% 10% 20%;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	margin: 0px auto;
}

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

См. также примеры на свойство border-image.