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:

<style type="text/css">
a.user-image {
background: transparent no-repeat top left;
display: block;
text-indent: -999em;
width: 50px;
height: 50px;
border-radius: 5px;
box-shadow: 0px 0px 3px #666;
}
</style>
<a class="user-image" href="http://www.facebook.com/ajaxray" style="background-image: url(http://graph.facebook.com/667896332/picture)" title="Visit Anis's profile">Anis Ahmad</a>
<!--
Post: http://ajaxray.com/blog/rounded-thumb-image-with-css-3
Demo: http://ajaxray.com/Examples/cropped-thumb.html
-->
view raw gistfile1.html hosted with ❤ by GitHub

See code on Gist.

You’re done! Check the live demo.

1 Comment

Leave a Comment

Your email address will not be published.