CSS Property border-image-repeat
The border-image-repeat
CSS property defines whether to repeat, round or stretch
the border image so that it can match the size of the border.
The one-value syntax describes the behavior of all the sides. The two-value syntax sets the horizontal and vertical sides.
Summary
- Initial value
- stretch
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.borderImageRepeat="round"
- Animatable
- no
CSS Syntax
border-image-repeat: stretch|repeat|round|initial|inherit;
Property Values
- stretch
- Default value. stretch image to fill the border
- repeat
- tile image to fill the border
- round
- tile image to fill the border. rescale image if the whole number of images cannot fit.
- space
- tile image to fill the border. distribute the extra space among tiles if the whole number of images cannot fit.
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
border-image-repeat |
Yes | 11.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {<!-- w w w .j av a 2s . co m-->
background-color: lightgrey;
border: 30px solid transparent;
border-image: url('http://java2s.com/style/demo/border.png');
border-image-slice: 10;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<div>
This DIV uses an image as a border.
</div>
<p>Here is the image used:</p>
<img src="http://java2s.com/style/demo/border.png">
</body>
</html>