border-image #3

Example of the effects of border-image-repeat.

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>
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='black' x='0' y='0' width='10' height='10'/></svg>

CSS

.repeat  { 
    border-image-repeat: repeat;
}

.stretch { 
    border-image-repeat: stretch;
}

.round   { 
    border-image-repeat: round;
}

.space   {
    border-image-repeat: space;
}

.border {    
    border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='black' x='0' y='0' width='5' height='5'/></svg>");
    border-image-slice: 1;
    border-width: 30px;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    width: 203px;
}

h1, h2 { font: bold 16px sans-serif; text-align: center; }
h2 { font-size: 14px; }