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

They are using images for rounding on the corners. You can do this with <img> tags like they do, or give elements like <div>s and such background images with CSS.

Their site uses rounded images...not sure what you say in FireBug but they are rounded. Alternatively instead of using separate <img> tags, you could use css background images for entire sections or for borders.

An alternative is rounded corners in CSS, but not all browsers are supporting this just yet.

Answer 2

I think you're mistaken - check out the image for those big callouts -

http://pad3.whstatic.com/skins/WikiHow/images/actionBox_background_curl.png

... and here's the image that's sitting on top of the main container div (div.actions_shell) -

http://pad1.whstatic.com/skins/WikiHow/images/actions_top.png

... both include rounded corners.

Regarding the thumbnails in the 'featured' section, they're just overlaying a .png which is transparent except for white rounded corner cutouts:

http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png

Answer 3

Try out the jquery rounded corner plugin. I think that can do what you are looking for

Answer 4

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 5

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"/&gt;
<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 6

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).

Answer 7

There is actually no need whatsoever to use <img> tags to achieve what this site does. You can do it all with css (without using CSS3 properties). The trick to rounded corners is finding extra elements to hook your corner image onto in the css.

See:

Sliding Doors and Custom Corners

Forget all these posts talking about moz-border-radius and -webkit-border-radius. The CSS3 property is just called border-radius and all modern browsers support it.