2005-09-17: when you 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. See "How do I remove the blue border around my image?" for the answer to that question.

Occasionally, though, someone likes the border and just wants to change the color. You can do this easily using a style attribute:

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

An even cleaner solution, if you always want a red border for linked images, is to say so in a style sheet:

img
{
 border-color: red;
}

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

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

This method will automatically display a red border around all images which are links.

Don't forget to make it very clear through your design choices that the image is still meant to be clicked on.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!

---