This post should be useful for those who are having trouble in removing borders from linked images. Now consider this scenario – you have an image (e.g. 250×250) which you intend to add to your homepage. Everything goes well until you preview the page and discover a thick blue (or any other preset hyperlink colour) around the image. In most cases, this would make the image appear awkward and sometimes distort the colour balance of the Web page.
One way of dealing with this issue is by setting the text-decoration property, which allows text to be display as underline, overline, line-through or default, to none as follows.
a:link, a:visited,a:active {text-decoration:none}
However, whilst using the text-decoration property will adequately deal with the appearance of linked texts in Web pages, it is not as effective in linked images.
The Solution
Hyperlink borders can be removed from images in CSS by using the border property. The border property is a short-cut for setting the border-width, border-style and border-color of an element as follows:
border: <width>||<style>||<color>
It can accept a value for one, two or three of the above while any omitted property is set to its default value. If you are still unsure about how to remove borders from linked images, you can copy the example code below into your css file.
a img {
border: 0 none;
}
Talking Point
Do you know any other way borders can be removed from linked images?
3 Comments
Leave a Reply
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Domain name registration
April 23, 2010 at 9:06 am
Nice tutorial,thank for sharing. I can now remove borders from linked images.
Blackjack Card Counting
August 14, 2010 at 2:36 am
Thanks for sharing buddy! Now my hyperlinked buttons don’t have an ugly box around them. I like the MagPress theme you’ve got going here too. Your version of it actually looks a lot better than the one over at the MagPress website. I might have to switch themes!
Janis Gagliardi
August 13, 2011 at 4:00 am
This is the same thing I do to remove the borders in CSS – border: none. To remove the border from all images by default, I use this:
:link img {
border: none;
}