CSS border-image-repeat property example at PNLdev

Run
<!DOCTYPE html>
<html>
<head>
<style> 
    #borderimg1 { 
    border: 25px solid transparent;
    padding: 25px;
    border-image-source: url(/pic.jpg);
    border-image-repeat: stretch;  
    border-image-slice: 25;
}
    #borderimg2 { 
    border: 20px solid transparent;
    padding: 20px;
    border-image-source: url(/pic.jpg);
    border-image-repeat: repeat;
    border-image-slice: 20;
}
    #borderimg3 { 
    border: 15px solid transparent;
    padding: 15px;
    border-image-source: url(/pic.jpg);
    border-image-repeat: round;
    border-image-slice: 15;
}
    #borderimg4 { 
    border: 10px solid transparent;
    padding: 10px;
    border-image-source: url(/pic.jpg);
    border-image-repeat: space;
    border-image-slice: 10;
}
</style>
</head>
<body>
    <h1>border-image-repeat property example</h1>
    <p>The border-image-repeat property specifies whether the border image should be repeated, rounded, spaced or stretched:</p>
    <h2>border-image-repeat: stretch (default):</h2>
    <p id="borderimg1">Here, the image is stretched to fill the area.</p>
    <h2>border-image-repeat: repeat:</h2>
    <p id="borderimg2">Here, the image is tiled to fill the area. Tiles are divided if necessary.</p>
    <h2>border-image-repeat: round:</h2>
    <p id="borderimg3">Here, the image is tiled to fill the area. The image is rescaled if necessary, to avoid dividing tiles.</p>
    <h2>border-image-repeat: space:</h2>
    <p id="borderimg4">Here, the image is tiled to fill the area. Extra space is distributed around the tiles if necessary.</p>
    <p>Here is the original image:</p>
    <img src="border.png">
    <p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image-repeat property.</p>
</body>
</html>