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

Свойство border-image-repeat CSS определяет, как масштабируются и повторяются изображения боковых частей и средней части изображения рамки. Среднюю область можно отображать, используя ключевое слово "fill" в свойстве border-image-slice.

Попробуйте

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: round stretch;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Синтаксис

/* Keyword value */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* top and bottom | left and right */
border-image-repeat: round stretch;

/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;

Для свойства border-image-repeat можно задать одно или два значения из приведённого ниже списка.

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

Значения

stretch

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

repeat

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

round

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

space

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

Формальное определение

Формальный синтаксис

border-image-repeat = 
  [ stretch | repeat | round | space ]{1,2}

Примеры

Повторяющиеся изображения рамки

CSS

#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /* Can be changed in the live sample */
}

<div id="bordered">You can try out various border repetition rules on me!</div>

<select id="repetition">
  <option value="stretch">stretch</option>
  <option value="repeat">repeat</option>
  <option value="round">round</option>
  <option value="space">space</option>
  <option value="stretch repeat">stretch repeat</option>
  <option value="space round">space round</option>
</select>

const repetition = document.getElementById("repetition");
repetition.addEventListener("change", (evt) => {
  document.getElementById("bordered").style.borderImageRepeat =
    evt.target.value;
});

Результат

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

Совместимость с браузерами

См. также

• Фоны и границы
• Изучаем CSS: фоны и границы
• Изображения рамок в CSS: ключевая тема Interop 2023 в блоге MDN (2023)