CSS border-image-repeat attribute

Definition and Usage

The border-image-repeat property specifies whether the image border should be repeated (repeated), stretched (stretched), or filled (rounded).

See also:

CSS3 Tutorial:CSS3 Borders

Example

Specifies how the image border should be repeated:

div
{
border-image-source: url(border.png);
border-image-repeat: round;
}

CSS Syntax

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

Note:This property specifies how to extend and tile the edges and middle part of the border image. Therefore, you can specify two values. If the second value is omitted, the same value as the first is taken.

Property Value

Value Description
stretch Stretch the image to fill the area
repeat Tile (repeat) the image to fill the area.
round Similar to the repeat value. If the image cannot be fully tiled to cover the area, it is scaled to fit the area.

Technical Details

Default value: stretch
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.borderImageRepeat="round"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

See also border-image Property.