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:
- Instead of using img, use a placeholder like a or span. Make it display:block.
- Place the image as background image of this placeholder.
- 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.