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


124

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 :

radio del borde de píxeles (px)porcentaje (%) radio del borde

Valor de píxel para radio de borde:

Valor de porcentaje para radio de borde:

¿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?

Respuestas:


181

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

El radio del borde en porcentaje (%) hace una elipsis

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.

El radio del borde en píxeles (px) crea una forma de píldora


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>


6
Excelente respuesta. Es una pena que los valores de radio porcentual se calculen por separado para el ancho y el alto. Significa que no puedo obtener esquinas circulares que escalen con el tamaño del objeto, sin conocer la relación de aspecto del objeto. ¿No sería bueno si el porcentaje se aplicara a la mayor de las dimensiones de los objetos?
Chris Dennis

4
@ChrisDennis Eso no es cierto. Como dijo OP, simplemente puede usar border-radius: 999px;. De esta manera obtiene sus esquinas circulares y estar seguro de que escalan con su elemento
Ráfagas van de Wal

9
Pero es posible que no quiera extremos semicirculares para la caja. Me gustaría poder especificar el radio x como, digamos, el 10% del ancho de la caja y el radio y igual al radio x.
Chris Dennis

4
Oye, ¿hiciste otra publicación con respuesta propia como esta? Agradecería leerlos.
Ced

3
Pero lo que realmente funciona con el porcentaje es: border-radius: 50%/100%(Probado en Chrome 60 + 61)
denns

6

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.


1
¿No es solo el 25% del ancho y el 50% de la altura? Eso no es lo mismo que el 50% de la altura en las direcciones X e Y.
mpen

¿Qué diablos es esta sintaxis? ¡funciona! Nunca supe que existía, ¡es lindo!
Uri Kutner

Es solo matemático hermano
CyberJ

1
No sé qué tipo de matemáticas has estado haciendo, pero no son "solo matemáticas". Es una abreviatura especialmente definida para border-radius que no tiene nada que ver con la división aritmética. w3.org/TR/css-backgrounds-3/#border-radius
MI Wright
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.