Свойство border-image

Пример


#el1
{
border-image:url("imgborder.jpg") 30 30 round;
-o-border-image:url("imgborder.jpg") 30 30 round;
}

#el2
{
border-image:url("imgborder.png") 30 30 stretch;
-o-border-image:url("imgborder.png") 30 30 stretch;
}

Попробовать в редакторе

Быстрый просмотр

Описание

Обратите внимание: данное свойство поддерживается в браузерах Chrome, Firefox и Safari 6+. Для браузера Opera требуется префикс -o. Данное свойство не поддерживается в браузере IE.

С помощью CSS3 свойства border-image Вы можете вставить в качестве границы элемента произвольное изображение.

Для того, чтобы сделать это необходимо:

Указать путь к изображению-границе;
Указать величину отступа от каждого края изображения для того, чтобы разрезать изображения на 9 частей (верхний левый угол, верхняя сторона, верхний правый угол, левая сторона и т.д.)
В данном примере величина отступа установлена равной 30px с каждой стороны изображения (размер клетки равен 10x10 пикселей). Черными линиями проиллюстрировано как будет в итоге разрезано изображение. Углы и стороны специально выделены разными цветами, чтобы Вы легко могли опознать их в примере далее.
Указать ширину границы в пикселях;
Указать должно ли изображение повторяться (repeat), округляться (round) или растягиваться (stretch), чтобы заполнить границу элемента.

Синтаксис:


border-image:путь отступ ширина повторение;

путь путь к изображению, которое будет использоваться в качестве границы элемента;
отступ величина, которая будет отступаться от каждого края изображения-границы, чтобы разделить его на части (верхний правый угол, верхняя граница и т.д.);
ширина ширина изображения-границы;
повторение устанавливает должно ли изображение повторяться (repeat), округляться (round) или растягиваться (stretch), чтобы заполнить границу элемента.

« CSS Справочник