title: Border-radius in percentage (%) and pixels (px) or em
body: <p>If I use a <strong>pixel or em value</strong> for border-radius, the edge radius is always a <strong>circular arc</strong> or a <strong>pill shape</strong> even if the value is greater than the largest side of the element.  </p>
  
  <p>When I use <strong>percentages</strong>, the edge radius is elliptic and starts at the middle of each side of the element resulting in an <strong>oval or ellipse shape</strong> :</p>
  
  <p><img src="https://i.stack.imgur.com/ecMlo.png" alt="pixel (px) border radius"><img src="https://i.imgur.com/XGkAcJA.png" alt="percent (%) border-radius"></p>
  
  <p>Pixel value for border-radius :
  <div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
     background: teal;
     border-radius: 999px;
     width: 230px;
     height: 100px;
     padding: 40px 10px;
     box-sizing: border-box;
     font-family: courier;
     color: #fff;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;border-radius:999px;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Percent value for border-radius :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background: teal;
    border-radius: 50%;
    width: 230px;
    height: 100px;
    padding:40px 10px;
    box-sizing:border-box;
    font-family:courier;
    color:#fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;border-radius:50%;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why doesn't border radius in percentages act the same way as border-radius set with pixel or em values?</p>