Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.
Краткая информация
Значение по умолчанию |
none |
Наследуется |
Нет |
Применяется |
Ко всем элементам, за исключением тех, у кого border-collapseзадан как collapse |
Анимируется |
Нет |
Синтаксис
border-image: none | [ <адрес> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] &&
[stretch | repeat | round]{0,2}
Значения
none |
Не отображает рисованную рамку, используется установленный стиль границы. |
<адрес> |
Путь к графическому файлу. Обязательный параметр. |
<число> |
Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселях, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px).Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
Число значений |
Результат |
1 |
Устанавливает границы одинаковой толщины на каждой стороне рисунка. |
2 |
Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой. |
3 |
Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы. |
4 |
Поочерёдно устанавливается размеры верхней, правой, нижней и левой границы. |
|
<проценты> |
Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен. |
<толщина> |
Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-width и использует тот же синтакси |
stretch |
Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию. |
repeat |
Повторяет рисунок границы. |
round |
Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений. |