border-image

Оновлено: 15.12.2022

border-image

Використовується для відображення мальованої рамки навколо елемента. Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. За інших значень border малюнок завжди має пріоритет. Фон, якщо він заданий через властивість background, відображається під рамкою.

Коротка інформація

Значення за замовчуванням none
Успадковується Ні
Застосовується До всіх елементів, за винятком тих, у кого border-collapse задано як collapse
Анімується Ні

Синтаксис

border-image: none | [ <адреса> [<число> | <відсотки>]{1,4} [/ <товщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

Значення

none Не відображає мальовану рамку, використовується встановлений стиль кордону.
<адреса> Шлях до графічного файлу. Обов'язковий параметр. Саме зображення для створення рамки продемонстровано на рис. 1 і складається з дев'яти областей: чотирьох куточків, верхнього, правого, нижнього, лівого боку і центральної частини, в якій виводиться вміст елемента.
Рис. 1. Зображення для створення рамки
<число> Одне, два, три або чотири значення, які вказують розміри частин зображення в пікселях, задаючи тим самим області поділу. Самі одиниці не пишуться, тільки число (10, а не 10px). На рис. 2 червоними лініями виділено необхідні для створення рамки області.
Рис. 2. Розподіл вихідного зображення на області

Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пропуском. Ефект залежить від кількості значень і наведений у табл. 1.

Табл. 1. Залежність від числа значень

Число значеньРезультат
1Встановлює межі однакової товщини на кожній стороні малюнка.
2Перше значення встановлює висоту верхньої та нижньої межі, друге - лівої та правої.
3Перше значення визначає висоту верхньої межі, друге - лівої та правої, а третє - висоту нижньої межі.
4По черзі встановлюються розміри верхньої, правої, нижньої та лівої межі.



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

Приклад

Об'єктна модель

Об'єкт.style.borderImage

Примітка

Firefox до версії 15.0 підтримує властивість -moz-border-image.

Safari до версії 6.0, Chrome до версії 15.0, Android до версії 4.4 підтримують властивість -webkit-border-image.

Opera до версії 15.0 підтримує властивість -o-border-image.

Браузери

border-image

Переглянути сумісність з Can I use?

border-image