Raggio del bordo in percentuale (%) e pixel (px) o em

Se utilizzo un valore pixel o em per il raggio del bordo, il raggio del bordo è sempre un arco circolare o una forma a pillola anche se il valore è maggiore del lato più grande dell'elemento.

Quando utilizzo le percentuali , il raggio del bordo è ellittico e inizia al centro di ciascun lato dell'elemento risultando in una forma ovale o ellittica :

Valore pixel per border-radius:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

Valore percentuale per border-radius:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

Perché il raggio del bordo in percentuale non funziona allo stesso modo del raggio del bordo impostato con i valori pixel o em?

Raggio del bordo:

Innanzitutto, è necessario capire che la proprietà border-radius accetta 2 valori. Questi valori sono i raggi sull'asse X / Y di un quarto di ellisse che definisce la forma dell'angolo.
Se è impostato solo uno dei valori, il secondo valore è uguale al primo. Quindi border-radius: xè equivalente a border-radius:x/x;.

Valori percentuali

Facendo riferimento alle specifiche W3C: CSS Backgrounds and Borders Module Level 3 border-radius property questo è ciò che possiamo leggere riguardo ai valori percentuali:

Percentuali: fare riferimento alla dimensione corrispondente del riquadro del bordo.

Quindi border-radius:50%;definisce i raddi dell'ellisse in questo modo:

• i raggi sull'asse X sono il 50% della larghezza dei contenitori
• i raggi sull'asse Y sono il 50% dell'altezza dei contenitori

Pixel e altre unità

L'uso di un valore diverso da una percentuale per il raggio del bordo (em, in, unità relative alla vista, cm ...) risulterà sempre in un'ellisse con gli stessi raggi X / Y. In altre parole, un cerchio .

Quando imposti border-radius:999px;i raggi del cerchio dovrebbero essere 999px. Ma un'altra regola viene applicata quando le curve si sovrappongono riducendo i raggi del cerchio a metà delle dimensioni del lato più piccolo. Quindi nel tuo esempio è uguale alla metà dell'altezza dell'elemento: 50px.

Per questo esempio (con un elemento di dimensione fissa) puoi ottenere lo stesso risultato sia con px che con le percentuali. Poiché l'elemento è 230px x 100px, border-radius: 50%;è equivalente a border-radius:115px/50px;(50% di entrambi i lati):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Basta dividere il primo valore per la% che vuoi .. quindi se vuoi un raggio del bordo del 50%, scrivi:

border-radius: 25%/50%; 

o un altro esempio:

border-radius: 15%/30%;

Puoi facilmente fare i conti in js o SASS.