CSS-свойство border-image-slice

CSS-свойство border-image-slice делит изображение, указанное в border-image-source, на девять областей: четыре угла, четыре ребра и середина. Это делается путем указания 4 внутренних смещений, которые обычно создают сетку три на три.

Средняя часть изображения границы отбрасывается и не используется самой границей, но используется background-image, если значение свойства установлено как fill.

Значение по умолчанию:	`100%`
Применяется к:	Все элементы, кроме внутренних элементов таблицы, когда `border-collapse` установлен `collapse`. Это также относится к `::first-letter`.
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit

Примеры написания кода свойства border-image-slice:

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    border-image-source: url("border.png");
    border-image-slice: 30;
    border-image-repeat: round;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
number	Устанавливает расстояние в пикселях для растровых изображений или векторные координаты для векторных изображений.
percentage	Процент относительно размера изображения: ширина изображения для горизонтальных смещений, высота изображения для вертикальных смещений.
`fill`	Если присутствует, сохраняет среднюю часть изображения. В противном случае середина считается прозрачной.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `border-image-slice`.