April 12, 2009 | In: how-to, snippet, Tips & Tricks, Web development
How to remove the blue border around an image link
[ad#only_in_post]
You want to use an image as a link.However, a blue border appears around the image.
|
1 2 3 |
<a href="http://www.myownpercept.com/"> <img src="logo.png" alt="" /> </a> |
This border is meant to inform users that the image is a link. Well, it’s a link but this is ugly :s and may not fit your need.
[ad#hire_me]
Solution
- You simply have to add a border-style, set to none, as a style to your img tag
123<a href="http://www.myownpercept.com/"><img style="border-style: none;" src="logo.png" alt="" /></a> - A cleaner way, that will pass the W3C validation, is by adding those lines to your CSS file :
123img {border-style: none;} - A dirty old way, but works, is by adding border attribute to the img tag.
123<a href="http://www.myownpercept.com/"><img src="logo.png" border="0" alt="" /></a>