CSS свойство border-image-repeat

Определение и применение

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

Допускается указать до двух значений для этого свойства. Если указано одно значение, оно применяется на горизонтальных и вертикальных сторонах границы. Если указаны оба значения, то первое применяется к горизонтали, а второе применяется к вертикальным сторонам.

Попробуйте значения border-image-repeat

Смотрите на белые метки по сторонам. stretch растягивает фрагмент; repeat повторяет; round подгоняет размер; space распределяет промежутки. Углы сохраняются.

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

border-image-repeat: stretch

HTML и CSS примера
HTML
<div class="scene">
  <img
    class="source"
    src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E"
    alt="Исходник: золотые углы, синие стороны с белыми метками, оранжевый центр"
  />
  <div class="demo-target">Рамка из изображения</div>
</div>
CSS
.scene {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.source {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
}
.demo-target {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 18px solid #245a85;
  background: #fff3d6;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2290%22%20viewBox%3D%220%200%2090%2090%22%3E%3Cpath%20fill%3D%22%23245a85%22%20d%3D%22M0%200h90v90H0z%22%2F%3E%3Cpath%20fill%3D%22%23ffcb69%22%20d%3D%22M0%200h30v30H0zM60%200h30v30H60zM0%2060h30v30H0zM60%2060h30v30H60z%22%2F%3E%3Cpath%20fill%3D%22%23ef803c%22%20d%3D%22M30%2030h30v30H30z%22%2F%3E%3Cpath%20stroke%3D%22white%22%20stroke-width%3D%224%22%20d%3D%22M45%200v30M0%2045h30M60%2045h30M45%2060v30%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 30;
  border-image-width: 1;
  border-image-repeat: stretch;
}

Поддержка браузерами

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2016 года.

Показать браузеры
Совместимостьcss.properties.border-image-repeat
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
border-image-repeat✓15✓12✓15✓15✓6✓18✓15✓14✓9.3✓1.0✓4.4✓9.3
repeat✓15✓12✓15✓15✓6✓18✓15✓14✓9.3✓1.0✓4.4✓9.3
round✓30✓12✓15✓17✓9.1✓30✓15✓18✓9.3✓2.0✓4.4✓9.3
space✓56✓12✓50✓43✓9.1✓56✓50✓43✓9.3✓6.0✓56✓9.3
stretch✓15✓12✓15✓15✓6✓18✓15✓14✓9.3✓1.0✓4.4✓9.3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
border-image-repeat: [ stretch | repeat | round | space ]{1,2};

/* Глобальные значения */
border-image-repeat: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; {1,2} — число повторений от 1 до 2.

JavaScript синтаксис:

JavaScript
element.style.borderImageRepeat = "stretch";

Начальное значение свойства

stretch.

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

Значения border-image-repeat
Значение Описание
stretch Изображение растягивает на всю область. Начальное значение.
repeat Изображение повторяется, чтобы заполнить всю область (пока не заполнит зазор между двумя границами). Если изображение не помещается после повторения на целое число раз, то изображение будет обрезано.
round Изображение должно повторяться, пока не заполнит зазор между двумя границами. Если изображение не помещается после повторения на целое число раз, то изображение будет масштабировано, чтобы соответствовать.
space Изображение повторяется, чтобы заполнить всю область. Если изображение не помещается после повторения на целое число раз, дополнительное пустое пространство распределяется между всеми повторами (плитками).
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства border-image-repeat устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Backgrounds and Borders — спецификация border-image-repeat.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Повторение частей рамки

Сравните stretch и round: полосы растягиваются или повторяются с подгонкой размера. Попробуйте repeat и space, а затем два значения: round stretch — отдельно для горизонтальных и вертикальных сторон.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 24px;
}
section {
    min-width: 0;
    padding: 16px;
}
h3 {
    margin: 0 0 24px;
    font-size: 16px;
}
.sample {
    min-height: 150px;
    padding: 28px;
    background: #f4f6f8;
}
.bounds {
    outline: 1px dashed #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="bounds"><div class="sample">Содержимое блока</div></div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="bounds"><div class="sample second">Содержимое блока</div></div>
  </section>
</div>
style.css
CSS
.sample {
    border: 12px solid #607589; /* Граница задаёт место для рисунка. */
    border-image-source: repeating-linear-gradient(45deg, #245a85 0 12px, #edc44b 12px 24px);
    border-image-slice: 24;
    border-image-repeat: stretch;
}
.second {
    border-image-repeat: round;
}