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.

Rounded thumbnail

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:


See code on Gist.

You’re done! Check the live demo.

1 Comment

Leave a Comment

Your email address will not be published. Required fields are marked *