Removing Borders From Linked Images In CSS

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?