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;