CODEWITHSUNDEEP
javascripthtmlcss
KJ Saxena
KJ Saxena

Reputation: 21848

Images with rounded corners

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.

Upvotes: 6

Views: 846

Answers (7)

Esteban Küber
Esteban Küber

Reputation: 36862

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;

Upvotes: 7

Finbarr
Finbarr

Reputation: 32206

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.

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630627

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.

Upvotes: 0

Matt Lohkamp
Matt Lohkamp

Reputation: 2192

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

Upvotes: 1

Jordan Running
Jordan Running

Reputation: 106147

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

Upvotes: 4

Anthony Labarre
Anthony Labarre

Reputation: 2804

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;
}

Upvotes: 4

Josh Mein
Josh Mein

Reputation: 28665

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

Upvotes: 3

Related Questions