border-image-repeat

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

Описание

The border-image-repeat CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

Начальное значениеstretch
Применяется квсе элементы, кроме внутренних табличных элементов, когда border-collapse:collapse. Это также применяется к ::first-letter.
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Синтаксис

css
/* border-image-repeat: type */
border-image-value: stretch;

/* border-image-repeat: horizontal vertical */
border-image-width: round stretch;

/* Глобальные значения */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

Значения

type

One of the stretch, repeat, or round keywords denoting how the image is treated both horizontally and vertically.

horizontal

One of the stretch, repeat, or round keywords denoting how the image is treated horizontally.

vertical

One of the stretch, repeat, or round keywords denoting how the image is treated vertically.

stretch

Keyword indicating that the image must be stretched to fill the gap between the two borders.

repeat

Keyword indicating that the image must be repeated until it fills the gap between the two borders.

round

Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.

space

The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

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

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

Примеры

See border-image for examples of what repeat values will do.

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

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-repeat

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

BCD tables only load in the browser

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