Quick and dirty rounded corners on an image

Written May 22, 2009. 15 comments.

Note: There is a much better way to achieve this today: using CSS3. This method outlined below came about as a way to solve the problem for browsers that didn't support rounded corners.

I got to a certain stage during the development of this blog when I realised I was going to want rounded corners on the article images. I was first reminded of a complex div/gif arrangement, and then my mind shifted to just simply Photoshopping them when needed. Neither are desirable so I came up with this quick and dirty solution.

Before you get too excited bear in mind this method is only good if the image you want to apply rounded corners too has consistent dimensions, that way you can swap the image out without any extra work.

So for this tutorial we will assume the image is going to be 150 x 150px.

Part 01: Prepare a transparent PNG

Open your preferred image editor and create an image with a blank canvas and add some rounded corners. The package I’ve linked at the end of this article contains one I prepared earlier.

Part 02: The HTML

In your document create a DIV with a class called rounded and place the transparent rounded cornered image inside it.

<div class="rounded"> <img src="corners.png" alt="" /> </div>

In your CSS file create the style for the rounded class.

.rounded { width:150px; height:150px; }

Now the quick bit is done, onto the dirty. Place an image into the opening DIV using inline CSS:

<div class="rounded" style="background-image:url(leaves.jpg)">  <img src="corners.png" alt="" /> </div>

But what about the ALT attribute? If you want to validate it will need to go on the PNG image.

<div class="rounded" style="background-image:url(leaves.jpg)"> <img src="corners.png" alt="Leaves" /> </div>

And if you need to add a link:

<div class="rounded" style="background-image:url(leaves.jpg)">  <a href="http://www.leaves.com"><img src="corners.png" alt="Leaves" /></a> </div>

That’s it – you’re done. I did say it was quick and dirty. It validates so I’m happy to use it when needed.

Tested in Firefox 2, Firefox 3, IE7, IE8, Chrome, Safari and Opera. IE6 should be fine but you will need a script to handle the transparent PNG otherwise you’ll just see a light blue box.

An accessibility consideration

As the PNG is technically a decorative image without meaning, some could argue that you should leave the ALT attribute empty. But as the ALT attribute is intended to help people with screen readers get a better idea of what’s on your page, I reckon it’s appropriate to put something inside the ALT in this case. The picture (the one visible under the PNG) still needs explaining for the visually impaired, where it actually is or how it’s implemented doesn’t matter.

twgb_rounded_corners.zip (13k)

Start of page

Who is That Web Guy?

Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.

15 Responses to Quick and dirty rounded corners on an image

Skip the comments

Alberto Vera says:

May 23, 2009 at 2:18 am
Thanxs, that is a great dirty way (i will used it quite a lot) nice!!!!
Jose says:

May 23, 2009 at 6:15 am
Not as dirty as you think. Love it thanks.
Kim OJ says:

May 23, 2009 at 6:41 am
That’s clever, though it is a little dirty. I might just have to use that trick for rounded corners, and maybe other little tweaks. Thanks.
CSS Babe says:

May 23, 2009 at 7:28 am
Its one of those little tips you wonder why no one thought of it before.
Kimmo says:

May 23, 2009 at 3:46 pm
This was a good read but it got me thinking: there’s quite a lot of markup for such a simple thing. You know, the background image could be assigned straight to the img element. That would also be quite a simple thing to automate using JS without losing the accessibility focus. And while we’re at it, we could throw in the magnificent DD_belated_png script to fix PNG alpha issues with IE6 but in this case it’s not needed as IE6 is (rightfully) discarded.
Marty says:

May 23, 2009 at 5:10 pm
That would work but you are proposing is invalid in XHTML strict unless it’s surrounded by a p or a h1 or something else. You can’t put a p or a h1 (or any other heading) around it unless you want to disregard semantics because it’s neither a paragraph or a heading, so that leaves you with a div as your only option which makes it almost the same as what’s shown here anyway.

Though if you don’t care for semantic mark-up then your method is fine Kimmo.
That Web Guy says:

May 23, 2009 at 5:53 pm
Thanks Kimmo. I don’t see any problems with it working your way except for the semantic issue Marty already raised. But if it’s HTML Transitional it will at least validate without having to surround the img tag with anything. I only ever do XHTML Strict and try to keep my mark-up semantically correct when possible though I admit to being lazy sometimes :-P
Carerra Davis says:

May 23, 2009 at 5:57 pm
Too much emphasis is placed on semantics. I like Kimmos way for my transitional pages.

This is a lovely design you’ve got going on. Hope you don’t mind if I steal some ideas from it!
Harun Smrkovic says:

May 24, 2009 at 1:20 am
Nice one !
This is good when using a CMS solution. You could create a few presets for this, and then link it to selected mode for image in database, so when you add bigger images, it re-sizes them to your preset and set it as wanted.
I don’t know how much you know about php and mysql, but man, I LOVE your design style.
That Web Guy says:

May 24, 2009 at 6:25 am
That’s pretty much what I have happening here. When I create a new article I browse for an image which is resized and cropped automatically and then echoed out on the page in that div. My php and mysql skills could be much better than they currently are – they’re a 3rd language to me :-)

Thanks for the design compliment!
Antone says:

May 24, 2009 at 6:32 am
I can’t believe you said that if you’re a web designer or developer. Awesome design here Web Guy.
Storm says:

May 25, 2009 at 4:15 pm
Neat!
Beth says:

May 26, 2009 at 8:18 am
That was simple. Thanks for the download too!
owen says:

June 13, 2009 at 12:04 am
Hmm I have better ideas for this one.. Thanks for the tip again.
Carlo says:

July 21, 2009 at 6:03 am
This Could also work to stop people from downloading your images. Unless they find the images’ url or get the image out of the browser cache somehow.