Recipe 3.2. Removing Borders Set on Images by Default in Some Browsers

Problem

You want to remove borders on images that are clickable like the one in Figure 3-3.

Figure 3-3. An image with a border

Solution

Set the border for images to zero (see Figure 3-4):

a img {  border: 0; }  

Figure 3-4. Now all images that are links will no longer have a border

Discussion

Before CSS, web developers would set the border of images through the border attribute of the img element:

<a href="http://csscookbook.com">  <img src="/books/3/27/1/html/2/file.jpg"  border="0" alt="logo" /> </a>

With the advent of CSS, developers separate the presentation from the content and that includes the border property. While including the border attribute in the HTML element is no longer required, this method can lead to a complication.

See Also

Recipe 3.1 for applying a border on an image.