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;
}