Create rounded shape by CSS

With CSS3 we can create rounded shapes without using a photoshop or other tool.

First add html code like this,

<div class="circle_main">  
      <div class="circle_sub"> 
       <img src="http://upload.wikimedia.org/wikipedia/en/2/2b/The_Circle_logo.png" width="170px" height="170px" alt=""/> 
      </div> 
 </div>

and CSS:

.circle_main
{
   border: 1px solid #288CED;
   width: 190px;
   height: 190px;
   padding: 0px;
   -webkit-border-radius: 90px;
   -moz-border-radius: 90px;
   border-radius: 105px;
 }
 .circle_main:hover
 {
   background-color: #288CED;
   transition: all 1s ease 0s;
   cursor:pointer;
 }
 .circle_sub
 {
   border: 5px solid #2D5260;
   width: 170px;
   height: 170px;
   padding: 0px;
   margin:0px auto;
   border-radius: 105px;
   margin-top: 5px;
   overflow: hidden;
 }

The output will be like this.

Check out Fiddle

Hope this was usefull.
Enjoy.