CSS3 border-image-repeatProperty


Example

Method for setting repeated images:

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

Try it Yourself »

Definition and use

The border-image-repeat property is used to specify whether the image border should be repeated, stretched, or rounded.

Tip:You can viewborder-imageProperty (Shorthand property for setting all border-image-* properties).

Default Value: stretch
Inheritance: no
animation: no. Viewanimatable
version: CSS3
JavaScript Syntax: object.style.borderImageRepeat="round" Try it Yourself

Browser Support

The numbers in the table indicate the version number of the first browser that supports this event.

Property
border-image-repeat 15.0 11.0 15.0 6.0 15.0

CSS Syntax

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

Note:This property specifies how the edges and middle parts of the border image are stretched and tiled. Therefore, you can specify two values. If the second value is omitted, it takes the same value as the first.

Property value

Value Description Example
stretch Default value. Stretches the image to fill the area. View Examples »
repeat Tile (repeat) the image to fill the area. View Examples »
round Similar to the repeat value. If all images cannot be completely tiled, the images are scaled to fit the area. View Examples »
space Similar to the repeat value. If all images cannot be completely tiled, the extra space is distributed around the images.
initial Sets this property to its default value.Viewinitial View Examples »
inherit Inherits this property from the parent element.Viewinherit

Related Pages

CSS3 Tutorial:CSS3 Border

CSS Reference:border-image property

CSS Reference:border-image-repeat property

CSS Reference:border-image-slice Property

CSS Reference:border-image-source property

CSS Reference:border-image-width Property

HTML DOM Reference:borderImageRepeat property

other extensions