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

Свойство CSS border-image-repeat управляет тем, как боковые фрагменты border-image масштабируются для заполнения краёв элемента. Оно определяет, будут ли эти фрагменты растянуты, повторены (плиткой), скруглены так, чтобы вместилось целое число плиток, или распределены с промежутками. Это одно из свойств CSS3.

Когда задано изображение рамки, свойство border-image-slice делит его на девять областей: четыре угла, четыре края и центр. Угловые фрагменты всегда размещаются по одному в каждом углу, однако четыре краевых фрагмента обычно должны покрыть расстояние, не кратное размеру фрагмента. Именно border-image-repeat сообщает браузеру, как обращаться с этим несоответствием.

Свойство может быть задано одним или двумя значениями. Если указано одно значение, оно применяется ко всем четырём сторонам. Если указаны два значения, первое применяется к верхней и нижней, второе — к левой и правой сторонам.

Начальное значение	stretch
Применяется к	Всем элементам, за исключением внутренних элементов таблицы, когда border-collapse равно «collapse». Также применяется к ::first-letter.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	object.style.borderImageRepeat = "round";

Синтаксис

Синтаксис свойства CSS border-image-repeat

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

Пример свойства border-image-repeat:

Пример свойства CSS border-image-repeat со значением round

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

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

Результат

Пример свойства border-image-repeat со значениями «round» и «repeat»:

Пример свойства CSS border-image-repeat со значениями round и repeat

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: repeat;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

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

Пример свойства border-image-repeat со значениями «space» и «stretch»:

Пример свойства CSS border-image-repeat со значениями space и stretch

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: space;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: stretch;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

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

Поведение каждого значения

Четыре ключевых слова различаются только тем, как они обрабатывают ситуацию, когда краевой фрагмент редко укладывается ровным числом в сторону, которую нужно заполнить:

stretch (значение по умолчанию) берёт один краевой фрагмент и масштабирует его так, чтобы он охватил всю сторону. Плиточного повтора нет, поэтому узор с выраженными мотивами (точки, фигуры, текст) будет искажён, но плавный градиент или сплошная текстура останутся без изменений.
repeat укладывает краевой фрагмент плиткой в его естественном размере и просто обрезает то, что не помещается. Плитки сохраняют свои пропорции, но у каждого угла может быть видна частично обрезанная плитка — и узор обычно не центрируется.
round тоже укладывает плитками, но предварительно немного изменяет размер фрагмента так, чтобы целое число плиток точно умещалось между углами. Используйте это значение, когда нужен чистый симметричный повтор без обрезанных плиток, и небольшое искажение допустимо.
space укладывает плиткой в натуральном размере, как repeat, но вместо обрезки отбрасывает неполную крайнюю плитку и распределяет освободившееся пространство в виде равных промежутков между полными плитками. (space имеет наименьшую поддержку браузерами из четырёх значений.)

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

Примечание: border-image-repeat не имеет эффекта сам по себе — у элемента уже должен быть задан border-image-source и ненулевая ширина рамки. Чаще всего оно записывается как часть сокращённого свойства border-image, а не отдельно.

Значения

Значение	Описание	Попробовать
stretch	Каждый промежуток между сторонами рамки заполняется растянутыми изображениями. Это значение по умолчанию.	Попробовать »
repeat	Каждый промежуток между сторонами рамки заполняется повторяющимися изображениями. Для подгонки повторы могут быть обрезаны.	Попробовать »
round	Каждый промежуток между сторонами рамки заполняется повторяющимися изображениями. Для подгонки повторы могут быть растянуты.	Попробовать »
space	Каждый промежуток между сторонами рамки заполняется повторяющимися изображениями. Для подгонки дополнительное пространство распределяется между повторами.
initial	Устанавливает свойство в значение по умолчанию.	Попробовать »
inherit	Наследует свойство от родительского элемента.

Практика

Какие значения можно использовать со свойством CSS border-image-repeat?

Связанные свойства

Остальные подсвойства border-image-* работают совместно с border-image-repeat:

border-image — сокращённое свойство, задающее все сразу.
border-image-source — используемое изображение.
border-image-slice — способ разбиения исходного изображения на девять областей.
border-image-width — ширина области border-image.
border-image-outset — насколько далеко изображение выходит за пределы блока рамки.