How to remove the ugly border around an image in a link
Wednesday, December 14th, 2005 at 11:32 amThis 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?
I am amazed that this is still a question that needs to be asked, but the trick to remember is that when you put an image inside a link, like:
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.
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.
I hope that this is going to be a post to show up high in google sooner or later, much like the ugly yellow form fields one.