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: 3400 | Post Order: 72