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

Related Posts