Images with rounded corners

Question

How do sites like these get to display images with rounded corners?

I checked with Firebug that the image being downloaded has sharp corners but the image being displayed has been modified somehow.

EDIT: I am referring to the rounded thumbnail pictures seen in the "Featured" articles section on the site mentioned.

Answer 1

It's using an image overlay that contains the curved borders.

<img class="rounders2_img" width="103" height="80" alt="" src="http://pad2.whstatic.com/images/thumb/1/18/Shadow-of-a-Writing-Hand-1834.jpg/-crop-103-80-103px-Shadow-of-a-Writing-Hand-1834.jpg"/>
<img class="rounders2_sprite" src="http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png" alt=""/>

The same technique is used generally for drop shadows.

This is done because IE doesn't support many CSS 3 cool stuff, like rounded corners:

moz-border-radius: 5px; -webkit-border-radius: 5px;

Answer 2

You can also do that without images (read it somewhere, can't find the link anymore), by defining this in your style sheet:

#divallrounded { /* every border rounded */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Answer 3

There's several ways to achieve this, but in this instance here's how they did it:

If you look into the HTML, you'll see that the <img> is inside an <a>, and inside the same <a> is a second <img>, corner_sprite.png. If you look at this image you'll see that it's a series of white corners that fit various sizes. Using CSS they just overlay this image on top of the image whose corners they want to round so that the corners line up with the image of the appropriate size. The CSS file they do this in is here. Search for "rounders" (a CSS beautifier might be useful here).