By using border-image-repeat
property we can repeat the border image.
<style> #divImgR { border: 20px solid transparent; padding: 20px; border-image-source: url(images/borderimage.jpg); border-image-repeat:repeat; border-image-slice: 25; } #divImgS { border: 20px solid transparent; padding: 20px; border-image-source: url(images/borderimage.jpg); border-image-repeat: stretch; border-image-slice: 25; } #divImgT { border: 20px solid transparent; padding: 20px; border-image-source: url(images/borderimage.jpg); border-image-repeat: round; border-image-slice: 25; } </style> <body> <p>This is some text.</p> <div id="divImgR"> Border Image repeat. </div> <div id="divImgS"> Border Image stretch. </div> <div id="divImgT"> Border Image Round. </div> <p><img src="images/borderimage.jpg" />: This is the orginal Border image.</p> </body>
In the above code snippet we have given border-image-repeat
property with different values to the ID
selector. So that the ID selector applies the border-image-repeat
property to the <div>
elements. The border-image-repeat
property value "repeat" repeats the image around the text, value "stretch" stretches the image in the border, value "round" rounds the image at the corners.
OUTPUT
Views: 3480 | Post Order: 78