Укажите изображение в качестве границы вокруг элемента:
#borderimg
{
border-image-source: url(border.png);
}
Попробуйте сами »
Определение border-image-source
CSS свойство border-image-source определяет путь к изображению, которое будет использоваться в качестве границы (вместо обычной границы вокруг элемента).
Совет: Если значение равно "none" или изображение не может быть отображено, будут использоваться стили границ.
Совет: Также посмотрите на свойство border-image (сокращенное свойство для настройки всех свойств border-image-*).
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderImageSource="url(border.png)" Попробуй |
Поддержка border-image-source
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-image-source | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Синтаксисborder-image-source
border-image-source: none|image|initial|inherit;
Значения border-image-source
| Значение | Описание | Демонстрация |
|---|---|---|
| none | Изображение использоваться не будет | |
| image | Путь к изображению, которое будет использоваться в качестве рамки | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме border-image-source
CSS Учебник: CSS Границы изображения
CSS Справочник: border-image свойство
CSS Справочник: border-image-outset свойство
CSS Справочник: border-image-repeat свойство
CSS Справочник: border-image-slice свойство
CSS Справочник: border-image-width свойство
HTML DOM справочник: borderImageSource свойство