title: How does this CSS produce a circle?
body: <p>This is the CSS:</p>
  
  <pre><code>div {
      width: 0;
      height: 0;
      border: 180px solid red;
      border-radius: 180px;
  }
  </code></pre>
  
  <p>How does it produce the circle below?</p>
  
  <p><img src="https://i.stack.imgur.com/yTmLN.jpg" alt="Enter image description here"></p>
  
  <p>Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this: </p>
  
  <p><img src="https://i.stack.imgur.com/nvK6a.jpg" alt="Enter image description here"></p>
  
  <p>After applying border-radius 30 pixels it would appear like this:</p>
  
  <p><img src="https://i.stack.imgur.com/xEutT.jpg" alt="Enter image description here"></p>
  
  <p>The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases.</p>
  
  <p>So, how does a border of 180 pixels with <code>height/width-&gt; 0px</code> become a circle with a radius of 180 pixels?</p>