border-image

Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Пример

border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

Аргументы

none - Не отображает рисованную рамку, используется установленный стиль границы.
URL - Путь к графическому файлу. Обязательный параметр.
<число> - Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).На рис. 2 красными линиями выделены необходимые для создания рамки области.

1 - Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2 - Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3 - Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4 - Поочередно устанавливается размеры верхней, правой, нижней и левой границы.

<проценты> - Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен.
<толщина> - Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтаксис.
stretch - Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat - Повторяет рисунок границы.
round - Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.