Определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть.
Свойство border-image-slice может принимать от одного до четырех значений. При установке всех четырех значений, они применяются каждое к своему отступу: сверху, справа, снизу, слева. Отступ слева можно не указывать, он будет такой же, как справа. Если не указать отступ снизу, то будет применено значение отступа сверху. Если указать одно значение, то оно будет применено ко всем сторонам.
CSS синтаксис
border-image-slice: число | % | fill | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| число | Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах (если растровое изображение) или координатах (если векторное изображение), задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px). |
| % | Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. |
| fill | Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем как разделять изображение-рамку
#borderimg {
border-image-slice: 30;
}
