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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/02/rounded-image1.pnghttp://w3lessons.info/wp-content/uploads/2012/02/rounded-image1-150x150.pngKarthikeyan KFreebiesWeb DesignCascading Style Sheets,freebies,rounded image,tips & tricks,Website
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 codeHere is the html codePlease don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all...