border-image-repeat

Summary

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.

Initial value stretch
Applies to all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited no
Media visual
Computed value as specified
Animatable no
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: [ stretch | repeat | round ]{1,2}

border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;

border-image-repeat: inherit

Values

type: One of the stretch, repeat, round, or space keywords denoting how the image is treated both horizontally and vertically.
horizontal: One of the stretch, repeat, round, or space keywords denoting how the image is treated horizontally.
vertical: One of the stretch, repeat, round, or space 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: Keyword indicating that the image must be tiled to fill the area. If the image doesn't fill the area with a whole number of tiles, the extra space is distributed around the tiles.
inherit: Keyword indicating that all four values are inherited from their parents' calculated element value.

Examples

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

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-repeat' in that specification.	Candidate Recommendation	Initial specification

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	15.0	15.0 (15.0)	11	15	6

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	15.0 (15.0)	Not supported	?	?

A space value was present in the early Candidate Recommendation versions. Since none of the browsers implemented it, the value was removed. It may, however, reappear in future drafts.