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?
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:
<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.
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.
December 14th, 2005 at 1:13 pm
May save us a lot of repetitions.
Is this where we stop writing long answers and just respond with:
See [link] …?
December 14th, 2005 at 5:56 pm
Wow… How age the person that asked you about how to remove a border from an image have? 8 or 9?
April 4th, 2008 at 1:26 pm
“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.”
I hope not. I hope you will write useful articles instead of crap.
April 4th, 2008 at 5:05 pm
Hmm, I love you, too
May 21st, 2008 at 1:36 am
“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:”
There will always be people who don’t know this. Nobody knows everything, even I.
June 23rd, 2008 at 8:44 am
Henrique Costa Pereira Says:
December 14th, 2005 at 5:56 pm
Wow… How age the person that asked you about how to remove a border from an image have? 8 or 9?
___________________________________
…and you smart guy (Henrique Costa Pereira) how asshole are you really? You born with this knowledge and start working to NASA when you’re 4 ?
look some stupid fucks…!!
October 17th, 2008 at 7:43 pm
I have this problem my self, and cannot seem to get it solved.
I have this in the css-file:
a img {border: none; }
I have put that line in every position I can think of, even inside the img-tag itself.
There still appears a dotted line under my images containing a link.
But then I am 54 years of age and dumb as a piece of wood.
Maybe I shouldn’t ask my question here….
But… What am I doing wrong?