Border-image in CSS3

How to create image as a border to the text in CSS3?

By using border-image we can create image as a border to the text.

<style>
        a.class1 {
            font-size: 20px;
            border: 2px solid green;
            padding: 10px;
            border-radius: 10px;
        }

            a.class1:hover {
                background-color: pink;
            }

        #divImgS {
            border-image: url('borderimage.jpg') 50 50 round;
            -webkit-border-image: url('borderimage.jpg') 30 30 round;
            height: 30px;
            border-width: 30px;
        }
</style>

<body>
 <p>this is some text</p>
    <a href="http://www.dotnetfunda.com" class="class1">dotnetfunda.com</a>
    <p> this is some text</p>
    <div id="divImgS">
       ITFUNDA
    </div>
</body>

In the above code snippet, we have given class selector with normal border to the link in <a> tag and ID selector with image-border to the text inside the <div> tag.

OUTPUT

Views: 3421 | Post Order: 72

CSS3 > Borders

Border-image in CSS3

How to create image as a border to the text in CSS3?

Related Posts

Utility Tools