Свойство 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('https://mfs.gki-webik.ru/s?path=/images/regular/body-img.jpg') 30 round round;
}
</style>
<div id='test1'></div>
</body>
</html>

Описание

Синтаксис

Подробности

Пример

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

Свойство grid-gap

Стиль элемента при наведении на него курсора мыши

Вывод контента после содержимого элемента

Свойство grid-column-gap