Border-image-repeat Property in CSS3

How to repeat the border image in CSS3?

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-repeatproperty 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: 3510 | Post Order: 78

CSS3 > Borders

Border-image-repeat Property in CSS3

How to repeat the border image in CSS3?

Related Posts

Utility Tools