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)
Alberto Vera
Thanxs, that is a great dirty way (i will used it quite a lot) nice!!!!
Saturday 23rd May 2009 | 02:18 AM Reply Comment URL Back to top