Radio del borde en porcentaje (%) y píxeles (px) o em

Si utilizo un valor de píxel o em para el radio del borde, el radio del borde es siempre un arco circular o una forma de píldora, incluso si el valor es mayor que el lado más grande del elemento.

Cuando uso porcentajes , el radio del borde es elíptico y comienza en el medio de cada lado del elemento, lo que da como resultado una forma ovalada o elipse :

Valor de píxel para radio de borde:

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>

Valor de porcentaje para radio de borde:

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>

¿Por qué el radio del borde en porcentajes no actúa de la misma manera que el radio del borde establecido con valores de píxeles o em?

Radio de borde:

Primero, debe comprender que la propiedad border-radius toma 2 valores. Estos valores son los radios en el eje X / Y de un cuarto de elipse que define la forma de la esquina.
Si solo se establece uno de los valores, el segundo valor es igual al primero. Entonces border-radius: xes equivalente a border-radius:x/x;.

Valores porcentuales

Refiriéndose a las especificaciones de W3C: Propiedad de radio de borde de nivel 3 del módulo de fondos y bordes CSS, esto es lo que podemos leer sobre los valores porcentuales:

Porcentajes: consulte la dimensión correspondiente del cuadro de borde.

Entonces border-radius:50%;define el raddi de la elipse de esta manera:

• el radio en el eje X es el 50% del ancho de los contenedores
• el radio en el eje Y es el 50% de la altura de los contenedores

Pixel y otras unidades

El uso de un valor que no sea un porcentaje para el radio del borde (em, pulg, unidades relacionadas con la ventana gráfica, cm ...) siempre dará como resultado una elipse con los mismos radios X / Y. En otras palabras, un círculo .

Cuando establezca, border-radius:999px;los radios del círculo deben ser de 999 px. Pero se aplica otra regla cuando las curvas se superponen reduciendo el radio del círculo a la mitad del tamaño del lado más pequeño. Entonces, en su ejemplo, es igual a la mitad de la altura del elemento: 50px.

Para este ejemplo (con un elemento de tamaño fijo) puede obtener el mismo resultado con px y porcentajes. Tal como está el elemento 230px x 100px, border-radius: 50%;es equivalente a border-radius:115px/50px;(50% de ambos lados):

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>

Simplemente divida el primer valor por el% que desee ... así que si desea un radio de borde del 50%, escriba:

border-radius: 25%/50%; 

u otro ejemplo:

border-radius: 15%/30%;

Puede hacer los cálculos fácilmente en js o SASS.