title: Circle with two borders
body: <p>How can I style a a circle (a <code>div</code>) with two borders responsively so that it reacts to a container's size? </p>
  
  <p>Suppose circles like this for example:</p>
  
  <p><img src="https://i.stack.imgur.com/hYIUx.png" alt="circles with 2 borders"></p>
  
  <p>Here is a working CSS for a circle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.circle {
    width: 90%;
    height: 0;
    padding-bottom: 90%;
    margin: auto;
    float: none;
    border-radius: 50%;
    border: 1px solid green;
    background: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I add a <strong>border with two colors</strong>? I tried outline but it came out as a rectangle. I tried to place another div inside the circle div and use background color but I can't align the inner div vertically.</p>