Connect with us

Hi, what are you looking for?

Tech

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?

Written By

Thanks for reading this article. If you're new here, why don't you subscribe for regular updates via RSS feed or via email. You can also subscribe by following @techsling on Twitter or becoming our fan on Facebook. Thanks for visiting!

3 Comments

3 Comments

  1. Domain name registration

    April 23, 2010 at 9:06 am

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

  2. 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!

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Web

Undoubtedly, customizable themes have replaced massive and mind-boggling coding tasks. While this is great, there are also limitations to them. With inbuilt themes, you’re...

Tech

Regardless of what field you specialize in or what your profession is, learning HTML and CSS programming can be of great help these days.

Design

Remember when websites were mere pages full of text and blue hyperlinks? If you’re a Millennial, probably not. Web sites, given their relatively short...

Mobile

Enhancing a front end performance is not always easy, but most developers know what to work with. Performance here does not refer to speed...