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?

Be the FIRST to Know - Join Our Mailing List!

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Previous ArticleNext Article
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

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

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.

Send this to a friend