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

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

Синтаксис

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

Значения

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

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

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

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

html<div id="elem"></div>

css#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

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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 для высоты:

html<div id="elem"></div>

css#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;
}

Результат:

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