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

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

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;
}

Browser Support

Desktop
11	12	15	15	15	6
Tablets / Mobile
4.4	18	15	14	9.3	1.0

Last updated by CSSPortal on: 12th October 2019