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

px to rem

Question

Si utilizo un valor de píxel o em para el radio del borde, el radio del borde siempre es 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 porcentual para el radio del 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?

Answer 1

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 definen la forma de la esquina.
Si solo se establece uno de los valores, el segundo valor es igual al primero. Entonces border-radius: x es equivalente a border-radius:x/x; .

Valores porcentuales

Refiriéndose a las especificaciones del W3C: Módulo de fondos y fronteras CSS Nivel 3 propiedad de radio de borde esto es lo que podemos leer con respecto a 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 del contenedor
• el radio en el eje Y es el 50% de la altura del contenedor

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 ventana gráfica, cm ...) siempre dará como resultado una elipse con el mismo radio X / Y. En otras palabras, un círculo .

Cuando estableces border-radius:999px; Los radios del círculo deben ser de 999 px. 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 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. Como el elemento es 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>

Answer 2

No es una respuesta real a la pregunta, sino un consejo de usabilidad para cualquiera que pueda tropezar con ella:

Si quiere usar una unidad relativa pero no quiere el comportamiento elíptico de % , siempre puede usar em o rem . Por ejemplo border-radius: 1em;

Answer 3

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

border-radius: 25%/50%; 

u otro ejemplo:

border-radius: 15%/30%;

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