CSS3 border-image-repeat Property
Example
Set the way images are tiled:
Definition and Usage
The border-image-repeat property is used to define whether the border image should be repeated, stretched, or rounded.
Tip: You can check out the border-image property
(a shorthand property for setting all border-image-* properties).
| Default value: | stretch |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | no. See animatable |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.borderImageRepeat="round" Try it |
| --- | --- |
Browser Support
The numbers in the table specify the first browser version that supports the event.
| Property | |||||
|---|---|---|---|---|---|
| border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS Syntax
Note: This property specifies how the middle part of the border image is tiled and stretched. Therefore, you can specify two values. If the second value is omitted, it is assumed to be the same as the first.
Property Values
| Value | Description | Example |
|---|---|---|
| stretch | Default value. Stretches the image to fill the area. | View example » |
| repeat | Tiles the image to fill the area. | View example » |
| round | Similar to repeat. If the image does not fit perfectly, it is scaled to fit the area. | View example » |
| space | Similar to repeat. If the image does not fit perfectly, extra space is distributed around the image. | |
| initial | Sets this property to its default value. See initial | View example » |
| inherit | Inherits this property from its parent element. See inherit |
Related Pages
CSS3 Tutorial: CSS3 Borders
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