Rounded / Sphere Shape Image using CSS

Hi guys, I am going to share a simple trick in css that will turn your existing image into sphere shaped image.

Here is the css code

.image-sphere-style .sphere,

.image-sphere-style .sphere img {

  border-radius:100px;-moz-border-radius:100px;-webkit-border-  radius:100px;display:block;margin:0;

}
  
 

.image-sphere-style .sphere {

  border:5px solid #B9B7B7; width:133px;

}

Here is the html code

<div class="image-sphere-style">

<div class="sphere">

<img src="alan.jpg" />

</div>

</div>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download