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

Позволяет устанавливать изображение вместо обычной рамки вокруг элемента.

Свойство border-image является универсальным и позволяет за одну декларацию устанавливать значения свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat.

Если какое-либо значение не указывается, то используется значение по умолчанию.

CSS синтаксис

border-image: source slice width outset repeat | initial | inherit;

Возможные значения

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

Пример

Устанавливаем изображение в качестве рамки вокруг элемента


#borderimg { 
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}