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

Свойство border-image-repeat определяет, необходимо ли маcштабировать, повторять или растянуть border-image.

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

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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-slice</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

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

Рассмотрим пример со значениями "round" и "repeat", где можно увидеть разницу между ними:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

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

Пример, где указаны значения "space" и "stretched":

Пример

<!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</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Здесь использовано оригинальное изображение:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

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

Значения

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