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="http://0.gravatar.com/avatar/222dad342987a085011139578299df12?s=150&r=G" class="img-rounded">
<img src="http://0.gravatar.com/avatar/222dad342987a085011139578299df12?s=150&r=G" class="img-polaroid">
<img src="http://0.gravatar.com/avatar/222dad342987a085011139578299df12?s=150&r=G" class="img-circle">


[button type=”anchor” url=”http://w3lessons.info/demo/rounded-circle-polaroid/rounded-circle-polaroid.html” color=”orange” align=”after”]View Demo[/button] [button type=”download” url=”https://www.box.com/s/vud0bi8jy1fz1ezebcyp” color=”red” align=”after”]Download[/button]

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


Related Posts