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

Si utilizo un valor pixel o em para border-radius, 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, dando como resultado una forma ovalada o de elipse :

radio de píxel (px)por ciento (%) border-radius

Valor de píxel para border-radius:

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

Valor porcentual para border-radius:

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

¿Por qué el radio de borde en porcentajes no actúa de la misma forma que border-radius con valores de pixel o em?

Radio de la frontera:

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

Valores de porcentajes

En referencia a las especificaciones del W3C: Propiedades del borde del borde de los Módulos de CSS y del Nivel 3, esto es lo que podemos leer con respecto a los valores porcentuales:

Porcentajes: consulte la dimensión correspondiente de la casilla de borde.

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

  • los radios en el eje X son 50% del ancho de los contenedores
  • los radios en el eje Y son 50% de la altura de los contenedores

Radio de la frontera en porcentaje (%) hacer una elipsis

Pixel y otras unidades

El uso de un valor que no sea un porcentaje para el radio del borde (em, in, unidades relacionadas con la vista, cm …) siempre dará como resultado una elipse con el mismo radio X / Y. En otras palabras, un círculo .

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

El radio del borde en píxeles (px) forma una pastilla


Para este ejemplo (con un elemento de tamaño fijo) puede obtener el mismo resultado con px y porcentajes. Como el elemento es 230px x 100px , border-radius: 50%; es equivalente al 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; } 
 
border-radius:50%;
border-radius:115px/50px;