Свойство border-image

Описание

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

Синтаксис

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


Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Эффект зависит от количества значений и приведен в таблице ниже:
Число значений Результат
1 Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2 Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3 Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4 Поочерёдно устанавливается размеры верхней, правой, нижней и левой границы.
% Аналог значения 'число', но значения задаются в процентах. Тот или другой параметр обязателен.
толщина Через слэш пишется от 1 до 4 значений толщины границы на каждой стороне элемента. Аналог border-width и использует тот же синтаксис.
stretch Растягивает рисунок границы до размеров элемента. Используется по умолчанию.
repeat Повторяет рисунок границы.
round Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Влияние этих параметров на вид рамки показано на изображениях ниже:
strech
repeat
round

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test1 {
width: 300px;
height: 200px;
border: 30px solid black;
background-color: rgba(229, 255, 0, 0.416);
border-image: url('/files/images/regular/body-img.jpg') 30 round round;
}
</style>
<div id='test1'></div>
</body>
</html>

Читайте также

Свойство padding-inline-end

Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по ст...

Свойство background-origin

Определяет область позиционирования фонового рисунка. Оно не применяется, при background-attachme...

Свойство box-sizing

Применяется для изменения алгоритма расчёта ширины и высоты элемента.

currentColor

Ключевое слово <span class='samp>currentColor</span> соответствует значению...

Свойство object-fit

Управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана шир...