---

Search posts under CSS3:

---

Border-image-width Property in CSS3

How to specify the width of the border image in CSS3?

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