By using border-image-width
property we can specify the width of 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; border-image-width: 100px; } #divImgS { border: 20px solid transparent; padding: 20px; border-image-source: url(images/borderimage.jpg); border-image-repeat: repeat; border-image-slice: 25; border-image-width: 30px; } #divImgT { border: 20px solid transparent; padding: 20px; border-image-source: url(images/borderimage.jpg); border-image-repeat: repeat; border-image-slice: 25; border-image-width: 40px; } </style> </body> <p>This is some text.</p> <div id="divImgR"> Border Image width 15px. </div> <br /> <div id="divImgS"> Border Image width 30px. </div> <br /> <div id="divImgT"> Border Image width 40px. </div> <p> <img src="images/borderimage.jpg" /> This is the orginal Border image. </p> </body>
In the above code snippet we have given the border-image-width
property to the ID
selector. So that the ID
selector selects the <div>
elements and applies the border-image-width
property according to their values.
OUTPUT
Views: 2943 | Post Order: 57