border-image #3

Example of the effects of border-image-repeat.

by cssplus

HTML

<h1>border-image-repeat</h1>
<h2>Notice how the repeating tiles fit the area</h2>
<div class="border repeat">Repeat</div>
<div class="border stretch">Stretch</div>
<div class="border round">Round</div>
<div class="border space">Space</div>

CSS

.repeat  { 
    -webkit-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
       -moz-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
        -ms-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
         -o-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 repeat; 
    
    border-image-repeat: repeat;
}

.stretch { 
    -webkit-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 stretch; 
       -moz-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 stretch; 
        -ms-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 stretch; 
         -o-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 stretch; 
    
    border-image-repeat: stretch;
}

.round   { 
    -webkit-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 round; 
       -moz-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 round; 
        -ms-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 round; 
         -o-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 round; 
    
    border-image-repeat: round;
}

.space   {
    -webkit-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 space; 
       -moz-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 space; 
        -ms-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 space; 
         -o-border-image: url(http://css-plus.com/examples/2012/04/border-image/img/example-3.png) 30 space; 
    
    border-image-repeat: space;
}

.border {    
 ...