CSS3 > Borders

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.

        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;

 <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">

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.


 Views: 561 | Post Order: 72

Write for us