WWW FAQs: How do I remove the blue border around my image?

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.

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.

I could turn off the borders only for links, and not for images
in general, by separately styling each of a:link img,
a:vlink img and a:alink img. But that usually
isn't necessary.

If we decided we really did want a border
for one of our images, how would we do it? The usual way:
by adding a border style to that particular
image or CSS class of images, with inline styles or in the style sheet.
And that would override what we've done here, for that particular
image or class of images. So there's no need to be subtle.

The Old Way That Always Works

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

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!