Rounded Corner Images

Question

How do sites like these display rounded corners?

I checked with Firebug that the downloadable image has sharp corners, but the displayed image was somehow changed.

EDIT: I mean the rounded thumbnails that you see in the "Favorites" section of the article on the mentioned site.

Answer 1

It uses an image overlay that contains 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 commonly used for shadows .

This is because IE does not support many interesting CSS 3 things, such as rounded corners :

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

Answer 2

You can also do this without images (read it somewhere, can no longer find the link) by defining this in your stylesheet:

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

Answer 3

There are several ways to achieve this, but in this case, here is how they did it:

If you look at HTML, you will see that <img> is inside <a> , and inside the same <a> is the second <img> , corner_sprite.png . If you look at this image, you will see that it is a series of white corners that are suitable for different sizes. Using CSS, they simply overlay this image on top of the image whose corners they want to round so that the corners coincide with the image of the corresponding size. The CSS file in which they are executed is here . Find "rounders" (a CSS decoder may be useful here).

Answer 4

Try the jQuery rounded plugin . I think you can do what you are looking for.

Answer 5

I think you're wrong - look at the image for these big callouts -

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

... and here is the image that sits on top of the main div container (div.actions_shell) -

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

... both include rounded corners.

As for the thumbnails in the "featured" section, they simply overlay .png, which is transparent, with the exception of the white rounded corner cutouts:

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

Answer 6

In fact, there is no need to use <img> tags to achieve what this site does. You can do all this with css (without using CSS3 properties). The rounded corners trick is finding additional elements to pin your corner image into css.

Cm:

Sliding Doors and Custom Corners

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

Answer 7

They use images to round in corners. You can do this with <img> tags like them, or provide elements such as <div> and background images using CSS.

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

An alternative is rounded corners in CSS , but not all browsers already support this.