border-image¶

Свойство border-image используется для отображения рисованной рамки вокруг элемента.

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

Демо¶

Это свойство является сокращением для следующих свойств CSS:

border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width

Фон

Синтаксис¶

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url('/images/border.png') 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url('/images/border.png') 27 23 / 50px 30px /
    1rem round space;

/* Global values */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

Для свойства border-image может быть указано от одного до пяти значений, перечисленных ниже.

Значения¶

none: Не отображает рисованную рамку, используется установленный стиль границы.
URL: Путь к графическому файлу. Обязательный параметр.

Само изображение для создания рамки продемонстрировано на рис. 1 и состоит из девяти областей: четырёх уголков, верхней, правой, нижней, левой стороны и центральной части, в которой выводится содержимое элемента.

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

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

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

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

Влияние этих параметров на вид рамки показано на рисунках.

Значение по-умолчанию:

border-image: none;

Применяется ко всем элементам, за исключением тех, у кого border-collapse задан как collapse

Спецификации¶

CSS Backgrounds and Borders Module Level 3

Поддержка браузерами¶

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Описание и примеры¶

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>border-image</title>
        <style>
            div {
                border: 30px solid #40c4c8;
                padding: 20px;
                border-image: url(/example/image/bg-image.png)
                    30 round round;
            }
        </style>
    </head>
    <body>
        <div>
            Витраж представляет собой композицию сделанную
            из множества цветных стекол обрамлённых
            проволокой и наиболее эффектно смотрится при
            прохождении через него солнечного или
            искусственного света.
        </div>
    </body>
</html>

Ссылки¶

генератор кода border-image