title: CSS circle with two borders of different colors or at least looks like
body: <p>I have a circle with one border, but I would like to know if there is anyway to achieve a circle with two borders of different colors. I have following CSS producing circle as follows:</p>
  
  <pre><code>.circle {
      width: 20px;
      height: 20px;
      border-radius: 12px;
      border: 1.5px solid #fff;
      font-family: Cambria;
      font-size: 11px;
      color: white;
      line-height: 20px;
      text-align: center;
      background: #3E78B2;
  }
  
  .circle:hover {
      width: 27px;
      height: 27px;
      border-radius: 18px;
      font-size: 12px;
      color: white;
      line-height: 27px;
      text-align: center;
      background: #3E78B2;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/premsh/QCVjr/" rel="nofollow">Here is link to jsFiddle</a></p>
  
  <p>You could see currently it has some white border. I would like to add another border on top of white border. </p>
  
  <p>Please let me know if you have any ideas/suggestions. </p>