Linked Images

From CSS Discuss

Jump to: navigation, search

How to remove the ugly border around an image in a link

This question pops up almost weekly on message boards, mailing lists and in chat sessions: How can I remove the ugly border around an image when it is linked?

The trick to remember is that when you put an image inside a link, like:

<a href="products.html">
  <img src="products.gif" alt="products" />
</a>

Then the browser puts a border *around the image* in the colour of the link. Therefore, changing the link border setting will not have any effect.

a {border:none; }

Instead, you need to set the image border to "none":

a img {border:none; }

It might be a good idea to define this as a preset in the beginning of your style sheet, to avoid the need to repeat it over and over again. An even better preset is this simpler rule:

img {border:none; }

This will remove the border that can appear on an image map, instead of just images that are inside <a> elements.

Also notice that the setting is "border:none", which tells the user agent that there should not be a border - if you use "border:0" you expect the User Agent to know how to display a border with a width of 0, which might not be possible.

Border specs on w3c: http://www.w3.org/TR/REC-CSS2/box.html#box-border-area (point 8.5)

Personal tools