CSS3 border-image-repeat Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The border-image-repeat CSS property specifies how the middle part of the border image are scaled or tiled so that it can match the size of the border.
The following table summarizes the usages context and the version history of this property.
| Default value: | stretch |
|---|---|
| Applies to: | All elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the border-image-repeat property in action.
Example
Try this code ».box {
width: 300px;
height: 150px;
border: 15px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-repeat: round;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
stretch |
The image is stretched to fill the area between the edges of the border. This is default value. |
repeat |
The image is tiled, or repeated, until it fills the area between the edges of the border. |
round |
The image is tiled, or repeated, until it fills the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the image is rescaled so that it does. |
space |
The image is tiled, or repeated, until it fills the area between the edges of the border. If the area cannot be filled with a whole number of tiles, the extra space is distributed around the tiles. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element border-image-repeat property. |
Browser Compatibility
The border-image-repeat property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Border, CSS Border.
Related properties: border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, border.
