Hello, my name is Pieter!

I build web applications and craft user interfaces.

Rounded images with CSS3

With CSS3 some really awesome methods came out. Box- and text-shadows, rounded corners, all these things. But to be honest, these things aren't perfect yet. One problem I had the other day was using border-radius on images. It just didn't work. That's why I wrote this plugin: it fixes this problem and adds some nice rouned corners to your images.

So, is this plugin worth using it?

I would say it is a nice plugin for having border-radius on images, nothing special about it. I did not find any other methods to do this, so I thought I could just release this jQuery solution as a plugin. As with most things in life, be it o2 priority or CSS3 and jQuery, it's nice to have options. That's why I have added some options and build this as a plugin. It won't hurt anyone.

How does it work?

It basically wraps the image in a rounded-corner div, puts the image as the background of this div and then hides the image itself. Plain simple.
Calling the plugin goes like this:
$('img').round(); If that ain't simple!
Don't forget to include jQuery and the plugin though!

Customisable?

A little, indeed. You can set the class of the wrapping div (default is .rounded) and the radius (default is 14px). Customising goes like this:
$('img').round({ divClass: 'imgWrapper', radius: 7 });

Suggestions?

If you found a bug, have any questions, want to suggest something or just say hi, you can contact me on Twitter or email me.

Download

Want it yourself? Here are some links:
Plain, readable version
Minified version