3

Removing Borders From Linked Images In CSS

css bordersThis 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?

Sign-up To Our Newsletter And Get A FREE eBook worth $14.99

Get Free E-book

Filed in: Tutorials Tags: , , , , ,
Download

Related Posts

Bookmark and Promote!

3 Responses to "Removing Borders From Linked Images In CSS"

  1. Nice tutorial,thank for sharing. I can now remove borders from linked images.

  2. 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!
    Blackjack Card Counting recently posted..Progressive Betting in BlackjackMy Profile

  3. Janis Gagliardi from daytona beach realtor says:

    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;
    }

Leave a Reply

Submit Comment

CommentLuv badge

Notify me of followup comments via e-mail. You can also subscribe to comments without commenting.

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 2).

© 2012 TechSling Weblog. All rights reserved. XHTML / CSS Valid.
 Technology Blogs - Blog Rankings TopOfBlogs Top Blogs Submit my blog Technology-Internet Link directory Technology See blogs and businesses for USA All About Cell Phone Bloggers - Meet Millions of Bloggers Technology Blogs  PageRank Checking Icon
 
Afrigator