Rounded thumb image with CSS 3

In modern Mobile apps, RIA or fancy websites like to display thumb images with a little rounded corners. We can do it on web with very little effort using a little CSS3 technique.

Just 3 simple 3 steps:

1. Instead of using img, use a placeholder like a or span. Make it display:block.
2. Place the image as background image of this placeholder.
3. Set a border radius and a little shadow for the placeholder.

Sample CSS and HTML code:

You’re done! Check the live demo.