Generador de border-radius CSS

Cada esquina es un cuarto de elipse

Una esquina redondeada en CSS es un cuarto de elipse con un radio horizontal y un radio vertical. Si das un solo número, los dos radios coinciden y la esquina es un cuarto de círculo. Si usas la forma con barra, se separan: border-radius: 60px / 20px crea esquinas anchas y poco profundas, la forma que ves en una píldora estirada. Todo lo que está antes de la barra es horizontal, todo lo que está después es vertical.

El orden, y los valores que omites

Las esquinas se listan en sentido horario desde la superior izquierda: superior izquierda, superior derecha, inferior derecha, inferior izquierda. Las listas más cortas reflejan en lugar de repetir:

• Un valor — las cuatro esquinas.
• Dos valores — el primero es superior izquierda e inferior derecha, el segundo es superior derecha e inferior izquierda. Las diagonales, no los pares que esperarías.
• Tres valores — superior izquierda, luego superior derecha e inferior izquierda juntas, luego inferior derecha.
• Cuatro valores — uno para cada esquina, en sentido horario.

La herramienta de arriba siempre escribe la forma más corta que expresa lo que construiste, por eso a veces el resultado tiene menos números que los deslizadores que ves.

Los porcentajes se calculan sobre dos longitudes distintas

Un radio horizontal en porcentaje se calcula sobre el ancho de la caja. Un radio vertical en porcentaje se calcula sobre su alto. En una caja de 400 por 100, border-radius: 20% da un radio horizontal de 80 píxeles y uno vertical de 20 — una esquina estirada, no una redonda. Esto explica también por qué 50% produce un círculo perfecto en un cuadrado y una elipse en cualquier otra cosa. Cambia la caja de vista previa de arriba de cuadrada a ancha y mira cómo un valor en porcentaje cambia de forma mientras el número se queda quieto.

La regla de escalado que nadie documenta bien

¿Qué pasa cuando los radios de un lado suman más de lo que mide ese lado? El navegador no los recorta uno por uno. Calcula, para cada lado, la razón entre la longitud del lado y la suma de sus dos radios, toma la menor de esas razones y, si está por debajo de 1, multiplica todos los radios de la caja por ese factor.

Vale la pena conocer la consecuencia: una esquina demasiado grande encoge en silencio a todas las demás, en proporción. También significa que border-radius: 50% nunca puede romperse, y que llevar al máximo uno de los deslizadores de arriba a veces hace que otra esquina se vea más pequeña aunque no la hayas tocado.

Bordes, padding y esquinas concéntricas

El radio se aplica a la caja del borde. La curva interior, donde empieza la caja de padding, tiene un radio igual al radio exterior menos el ancho del borde, con un mínimo de cero. Eso ocurre automáticamente con los bordes. No ocurre con los elementos anidados: una tarjeta con 16px de radio y 12px de padding necesita que su elemento interior quede en unos 4px, no en 16px, para que las dos curvas se vean concéntricas. Igualar los números es el error de siempre, y el resultado se ve sutilmente mal sin que nadie sepa decir por qué.

El redondeo también recorta el fondo y el borde, pero no el contenido. Una imagen o un elemento hijo con esquinas cuadradas va a asomar igual, salvo que agregues overflow: hidden al padre — algo que trae efectos secundarios, porque crea un contenedor de desplazamiento y rompe position: sticky para todo lo que esté adentro.

Estas esquinas no son squircles

Las esquinas de CSS son arcos elípticos, y un arco se une al borde recto con un cambio abrupto de curvatura. Los cuadrados redondeados de la pantalla de inicio de un iPhone son superelipses, donde la curvatura crece de forma continua, y por eso se ven más suaves con el mismo radio visual. Ninguna combinación de los ocho radios de aquí reproduce eso. Para un squircle de verdad necesitas un clip-path con un path, una máscara SVG, o la propiedad corner-shape a medida que llega el soporte de los navegadores.

Dónde se detiene esta herramienta

Solo escribe la forma abreviada. No emite las propiedades largas por esquina como border-top-left-radius, y no emite las versiones lógicas como border-start-start-radius, que son las que quieres si tu diseño se invierte para idiomas de derecha a izquierda. Las formas blob siguen estando hechas de arcos de elipse, así que parecen blobs de CSS y no algo dibujado a mano. Y todo lo que construyas en porcentajes va a cambiar de forma cada vez que el elemento cambie — los tres tamaños de vista previa lo insinúan, pero solo tu propio diseño te lo va a confirmar.

Preguntas frecuentes

¿Cómo hago un círculo con border-radius?

Pon border-radius: 50% en un elemento con el mismo ancho y alto. En un rectángulo ese mismo valor da una elipse, porque el radio horizontal se calcula sobre el ancho y el vertical sobre el alto.

¿Qué significa la barra en border-radius?

Separa los radios horizontales de los verticales. Los valores antes de la barra definen cuánto se extiende hacia los lados la curva de cada esquina, y los de después cuánto se extiende hacia arriba o hacia abajo. Sin barra, ambos son iguales y cada esquina es un cuarto de círculo.

¿Por qué una esquina se ve más pequeña que el valor que puse?

Porque los radios de un lado sumaban más que la longitud de ese lado. Cuando eso pasa, el navegador escala todos los radios de la caja por el mismo factor hasta que entren, así que una esquina demasiado grande encoge a las demás junto con ella.

¿Qué radio debe tener el interior de una tarjeta redondeada?

El radio exterior menos el padding. Un radio exterior de 16px con 12px de padding pide unos 4px adentro. Reutilizar el mismo número en el elemento anidado hace que las curvas no sean concéntricas, lo que se ve sutilmente mal aunque nadie sepa señalar la razón.

¿Por qué la imagen dentro de mi caja redondeada tiene esquinas cuadradas?

border-radius recorta el fondo y el borde del elemento, no sus hijos. Agrega overflow: hidden al padre, o dale a la imagen el mismo radio. Ten en cuenta que overflow: hidden crea un contenedor de desplazamiento y hace que position: sticky deje de funcionar adentro.

Última actualización 19 de septiembre de 2026