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 value: stretch
Applies to: All elements
Inherited: No
Media: Visual
Computed value: Two keywords, one for each axis
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.borderImageRepeat

Syntax

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

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

HTML

<div>Example of the border-image-repeat property</div>

CSS

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Result