CSS border-image-repeat property

Description

It specifies how the images are laid out i.e. whether the border images should be repeated or not and what should be the orientation of placement of border images?

Syntax

border-image-repeat : stretch | repeat | round | space

Property values

stretchDefault: The border image stretches itself to fill the border area.; border-image-repeat: stretch;
Try it
repeat: The border image is repeated to fill the border area.; border-image-repeat: repeat;
Try it
round: The border image is repeated untill it fills the border area. If it does not fit the border area a whole number of times, the image is rescaled so as to fit the border area.; border-image-repeat: round;
Try it

Applicable to

It applies to all elements except the table with border-collapse:collapse;.

Preview

Code

CSS

.parent{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/chrome.png');
border-image-slice:100;
}

HTML

<div class="parent">
 It specifies how the images are laid out.
 </div>

CSS3 Properties

Description

Syntax

Property values

Applicable to