Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

CSS3 border-image-repeat property


May 05, 2021 CSS Reference Manual


Table of contents


Specify how to repeat the image border:

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

Browser support

Property
border-image-repeat 15.0 11.0 15.0 6.0 15.0

Opera does not support border-image-repeat properties.

The border-image-repeat property is not supported by Internet Explorer 10 and earlier versions.

The border-image-repeat property is not supported by Safari 5 and earlier versions.

See the border-image property.

Definitions and usages

The border-image-repeat property specifies whether the image border should be repeated, stretched, or paved.

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

Possible values

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

Note: This property specifies how to extend and lay out the edges and middle parts of the border image. T herefore, you can specify two values. If the second value is omitted, the same value is taken as the first value.

Value Describe
stretch Stretch the image to fill the area
repeat Tile (repeat) the image to fill the area.
round The repeat value is similar. If all images cannot be fully tiled, the image is scaled to fit the area.

Related pages

CSS3 tutorial: CSS3 border