Свойство border-image-repeat
  1. Главная
  2. CSS
  3. Свойство border-image-repeat
Создание сайта на CMS WordPress: обучение и хостинг
← Перейти к списку свойств

СВОЙСТВО BORDER-IMAGE-REPEAT

Свойство border-image-repeat указывает, будет ли изображение рамки повторяться, округляться или растягиваться.

Поддержка браузеров

12+

Синтаксис

border-image-repeat: stretch|repeat|round|initial|inherit

Значения свойства

Значение Описание
stretch Изображение растягивается, чтобы заполнить область рамки. Это значение по умолчанию.
repeat Изображение повторяется по принципу мозайки, чтобы заполнить область рамки.
round Изображение повторяется по принципу мозайки, чтобы заполнить область рамки. Если оно не заполняет область целым числом плиток, оно масштабируется.
space Изображение повторяется по принципу мозайки, чтобы заполнить область рамки. Если это не заполняет область целым числом плиток, вокруг них образуется дополнительное пространство.
initial Устанавливает значение по умолчанию.
inherit Унаследует значение свойства от родительского элемента.

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="block"></div>
HTML 
.block {
    height: 50px;
    width: 50px;
    margin: 30px;
    background: #f1f1f1;
    border: 15px solid transparent;
    padding: 15px;   
    border-image: url(/images/border.png);
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset:2;
}
CSS
← Перейти к списку свойств