title: Using CSS create circle within a circle
body: <p>Using CSS I'm trying to draw a black circle with a white circle centered within it. This is my HTML/CSS:</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>#blackcircle {
    background-color: black;
    color: white;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 0 auto;
  }
  #whitecircle {
    background-color: white;
    color: black;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="blackcircle"&gt;
    &lt;div id="whitecircle"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>BUT as you can see (in Chrome and Firefox), the white circle is centered at the top of the white circle. I've tried various combinations of position:absolute and position:relative to no positive effect.</p>