title: Circle with border looks not circular, jagged and not smooth, why?
body: <p>why is my css circle not smooth?</p>
  
  <p>If i do a HTML5 Canvas its really nice.</p>
  
  <pre><code>&lt;div id="circle"&gt;&lt;/div&gt;
      &lt;style&gt;
      #circle {
      width: 100px;
      height: 100px;
      background: red;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      border:4px solid blue;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nkBp8/" rel="noreferrer">http://jsfiddle.net/nkBp8/</a></p>
  
  <p>Using Chrome and latest IE</p>
  
  <p>Notice the extreme top bottom right left points appear flat.</p>