Свойство 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 до 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>Читайте также
Свойство float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон....
Свойство cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы, браузера и установленных параметров....
Свойство font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
Список шрифтов может включать одно или нескольк...
Стиль поля формы с обязательным вводом
Применяет стилевые правила к элементу input, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправ...