border-image-repeat property CSS Reference



Definition and Usage

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

  • Initial stretch
  • Applies to all elements, except internal table elements when border-collapse is collapse
  • 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
Is one of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the one-value syntax.
horizontal
Is one of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the two-value syntax.
vertical
Is one of the stretch, repeat, round, and space keywords denoting how the image is repeated. It is used only in the two-value syntax.
stretch
Is a keyword indicating that the image must be stretched to fill the gap between the two borders.
repeat
Is a keyword indicating that the image must be repeated until it fills the gap between the two borders.
round
Is a 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 an integer number of times, the image is rescaled to fit.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples

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

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) Not supported Not supported Not supported

Mobile browsers

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

Relative articles