I want to turn an image into a link by wrapping it in an <a> element, a blue border appears around the image. I am often asked how to remove this border?

Something like this
<a href="http://yourlink.com"><img src="http://yoursite.com/img.jpg" border="0" /></a>

turning an image into a link to another page is very simple, and the following HTML does the trick:
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png">
</a>

However, you will note that a blue border appears around the image. This border is meant to inform users that the image is a link. Of course, there is something to be said for knowing what is a link, and what isn't.

Today, though, most web designers make it perfectly obvious through the design of their banners and navigation buttons that they are links to be clicked on. So how do we turn off the blue border?

The Right Way: XHTML Compliance And CSS

Modern browsers support CSS and the XHTML standard, and many designers are required to create pages that comply with XHTML. For those who need to create XHTML-compliant pages, CSS is the only way to go. The only drawback is that Netscape 4.x will still display a blue border. Of course, well below 1% of users are still using Netscape 4.x, and that number shrinks every day.
Here's a quick-and-dirty example with inline styles:


<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png" style="border-style: none"/>
</a>

An even cleaner solution, if you never want the blue border, is to say so in a style sheet:


img
{ border-style: none;
}

And then reference that style sheet in the head element of your page:


<link href="/mystylesheet.css" rel="stylesheet" type="text/css"/>

This method will automatically remove the blue border from all linked images in any page that uses that .css file.

Actually, to get rid of the blue border caused by putting it inside a link you need this css:


a img{border: none;}