CSS border-image-repeat Property

Description

The border-image-repeat property specifies how the images for the sides and the middle part of the border image are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first.

  • Initial valuestretch
  • Applies toAll elements
  • InheritedNo
  • MediaVisual
  • Computed valueTwo keywords, one for each axis
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.borderImageRepeat

Syntax

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

border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

Values

  • stretchThe image is stretched to fill the area.
  • repeatThe image is tiled (repeated) to fill the area.
  • roundThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
  • spaceThe 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.

Example

.class {
   border-image-repeat: repeat;
}

Browser Support

?Firefox?Explorer?Chrome?Safari?Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.