title: Creating a radio button with a smooth circle
body: <p>I have this radio button which looks like this <a href="http://jsfiddle.net/5cxwL6y7/" rel="nofollow noreferrer">http://jsfiddle.net/5cxwL6y7/</a></p>
  
  <p>The problem is the out circle although circular is not smooth. What i mean is,its visible that the circle outline is not continuous and has spaces in it.</p>
  
  <p>How can i make the circle totally circular without spaces.</p>
  
  <p>This is the html</p>
  
  <pre><code>&lt;input type='radio' name='a' checked/&gt;
  &lt;input type='radio' name='a'/&gt;
  </code></pre>
  
  <p>and this is the css3</p>
  
  <pre><code>input[type='radio'] {
      -webkit-appearance:none;
      width:20px;
      height:20px;
      border:1px solid darkgray;
      border-radius:50%;
      outline:none;
      box-shadow:0 0 5px 0px gray inset;
  }
  input[type='radio']:hover {
      box-shadow:0 0 5px 0px orange inset;
  }
  input[type='radio']:before {
      content:'';
      display:block;
      width:60%;
      height:60%;
      margin: 20% auto;    
      border-radius:50%;    
  }
  input[type='radio']:checked:before {
      background:green;
  }
  </code></pre>