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>

Click to view the demo