Automatically put rounded corners on images

I am working on a new Struturo website and wanted to put rounded borders around the images. But with the existing square images, it didn't look right. So initially I was going to write a Photoshop action to do the rounded borders in bulk but then that seemed like it would be a pain for the customer to have to do later.

So I did a little research and found some examples of people putting divs around their images so they could style them using CSS. Again, I don't want to bother the customer to put divs around the images so just wrote a little JQuery script to wrap the images. I wrote mine custom to let customer decide to float theirs right or left. The approach is like a stack of pancakes where there is an outer div around the image. Then the image is the bottom of the stack and you stack the corner and side images on top. The corner images are basically a gray line with white inside and transparency. So what you see at the end is the image under the corners. It's not perfect but it looks pretty nice.

If the user doesn't have JavaScript enabled, it just falls back on showing the original square image. Always unobtrusive.

Without JavaScript

by Jim Knight (Mar 25, 2010)