border-image-source
Укажите изображение в качестве границы вокруг элемента:
#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 свойство