Images with rounded, circle and polaroid styles using CSS3

Hi guys,

Today I am going to share some amazing css code to turn your profile picture into circle, rounded and polaroid styles.

Image :

rounded circle polaroid style image

CSS code :

.img-rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
   border-radius: 6px;
.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
.img-circle {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;

Usage :

<img src="" class="img-rounded">
<img src="" class="img-polaroid">
<img src="" class="img-circle">


Please don’t forget to share and subscribe to latest updates of the blog.


If you enjoyed this article, Get email updates (It’s Free)

Get every new post delivered to your Inbox

Join other followers

Read previous post:
Image Hover Effect using Jquery

Hi guys, I'm going to share some interesting tip to add a nice hover effect on images with simple jquery...