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