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

Свойство `border-image-repeat` задает способ повторения внутренней части границы в виде картинки. Для более подробной информации смотрите свойство `border-image`.

## Синтаксис

`селектор { border-image-repeat: stretch | repeat | round; }`

## Значения

Число параметров | Описание
--- | ---
`stretch` | Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
`repeat` | Повторяет рисунок границы.
`round` | Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Значение по умолчанию: `stretch`.

## Количество параметров

Может принимать `1` или `2` параметра. Если задано два параметра, то первый из них будет для верхней и нижней границы, а второй параметр - для левой и правой.

## Пример . Значение stretch

`<div id="elem"></div>` `#elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: stretch; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . Значение repeat

`<div id="elem"></div>` `#elem { border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: repeat; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . Значение round

Сейчас в нормальном состоянии установлено значение `repeat`, а по наведению - `round`. Обратите внимание что до наведения в границу помещается не целое количество ромбиков, а после наведения - целое. Так и работает `round`:

`<div id="elem"></div>` `#elem:hover { border-image-repeat: round; } #elem { border-style: solid; border-width: 42px; border-image-source: url("image.png"); border-image-slice: 26; border-image-repeat: repeat; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Пример . Два слова

Значение repeat для ширины и stretch для высоты:

`<div id="elem"></div>` `#elem { border-image-repeat: repeat stretch; border-image-source: url("image.png"); border-image-slice: 26; border-style: solid; border-width: 26px; width: 200px; height: 200px; background: green; margin: 0 auto; }`

:

## Смотрите также

- свойство `border-image`,
  которое является сокращением для границы-картинки
- свойство `border-image-source`,
  которое задает путь к картинке для границы
- свойство `border-image-slice`,
  которое разбиение картинки для границы
- свойство `border-image-width`,
  которое задает размер картинки для границы
- свойство `border-image-outset`,
  которое задает сдвиг картинки для границы

←→
↑