FAQ Digital Arts Group @ FrankGonzalez.com

Search the Knowledgebase	Browse by Category
[Advanced Search]

How do I remove the blue border around my image?

Would you like to...

Print this page

Email this page

Post a comment

User Opinions

No users have voted.

How would you rate this answer?

Helpful

Not helpful

Turning an image into a link to another page is very simple, and the following HTML does the trick:

< a href="http://www.yoursite.com/" >
< img src="/yourimage.gif" >
< /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 Old Way That Always Works

There is a simple and effective method that works with every browser, including old versions of Netscape 4.x. However, it won't pass a strict XHTML validator, so don't say we didn't warn you. Here it is:

< a href="http://www.yoursite.com/" >
< img src="/yourimage.gif" border="0" >
< /a >

The New Way That Is XHTML Strict Compliant

Those who care about complying with the very latest XHTML standard should use style sheets instead of the border attribute. However, be aware that Netscape 4.x will still display a blue border:

< a href="http://www.yoursite.com/" >
< img src="/yourimage.gif" 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 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.

Visitor Comments

No visitor comments posted. Post a comment