Create Rounded (Circular) Images With CSS3 And HTML

Playing with CSS and HTMl I found how to create circular images using CSS3.It is just awsome thing to make images circular without photoshoping them. You may use them for any purpose or just for fun.
So let's do it in real time.
1. The image below is a normal image.

2. Now we will add HTMl and CSS
HTML

<div class="rounded"></div>

CSS

.rounded { width: 300px; height: 300px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; background: url(http://link-to-your/image.png) no-repeat; }

RESULT

If you dont want the image as background and want to use image as img tag ypu can add these html and css.
HTML

<div class="rounded"></div><div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div>

CSS

.rounded{ width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://link-to-your/image.jpg) no-repeat; } .rounded img { opacity: 0; filter: alpha(opacity=0); }

And you will get the same result but with an option to let user drag the image and search engines to index.
Hope you enjoyed this tutorial more like this are coming soon just subscribe us .