¿Qué significan los ocho valores?

Cuatro radios horizontales (uno por esquina) y cuatro radios verticales (también uno por esquina). Cuando el radio horizontal y vertical de una esquina son iguales, la esquina es un cuarto de círculo. Cuando difieren, es un cuarto de elipse - y eso es lo que da las formas blob orgánicas, las puntas de hoja, los talones de ticket y los iconos squircle estilo iOS.

¿Qué es un squircle?

Una aproximación de rectángulo redondeado más suave de lo que CSS border-radius puede producir nativamente - la forma de icono de la pantalla de inicio de iOS. Lo más cercano en CSS puro es usar radios horizontales y verticales desiguales (algo como `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Los squircles reales requieren un path SVG o un paint worklet de CSS Houdini - el preajuste aquí es la mejor aproximación en CSS.

¿Por qué la sintaxis con barra?

Sin la barra, todas las esquinas reciben radios circulares (horizontal = vertical). La barra te permite fijar radios horizontales y verticales distintos por esquina, que es justo el sentido de las formas asimétricas. Todos los navegadores la soportan, y es la única forma de conseguir una forma «hoja» (una esquina casi cuadrada, la opuesta casi círculo).

¿Porcentajes o píxeles?

Sí a los porcentajes - escalan con el tamaño del elemento, que es lo que quieres para formas que deben mantener su proporción al crecer. Los píxeles son predecibles pero rompen al redimensionar (un radio de 40 px en un elemento de 30 px se clampea a la mitad del ancho y se vuelve un semicírculo). El generador usa porcentajes para que las formas predefinidas sobrevivan al redimensionado.

¿Los radios grandes rompen en navegadores antiguos?

border-radius está soportado en todos los navegadores desde 2010. La sintaxis con barra para radios asimétricos, desde IE 9. La única pega moderna es el desbordamiento: `border-radius` no recorta el contenido hijo a menos que también pongas `overflow: hidden` en el mismo elemento - si no, imágenes y descendientes en absoluto se salen por las esquinas redondeadas.

Generador de border-radius

Border-radius asimétrico con 8 valores de esquina, vista previa en vivo y preajustes (píldora, blob, hoja, ticket).

Preajustes

Radios horizontales

Arriba-izq

Arriba-der

Abajo-der

Abajo-izq

Radios verticales

Arriba-izq

Arriba-der

Abajo-der

Abajo-izq

CSS

border-radius: 60% 40% 30% 70% / 30% 70% 60% 40%;

Vista previa

El border-radius admite más de un número. La forma completa CSS: `border-radius: arriba-izq arriba-der abajo-der abajo-izq / arriba-izq-v arriba-der-v abajo-der-v abajo-izq-v;` - ocho valores para que cada esquina se curve diferente horizontal y verticalmente. Arrastra los sliders, la vista previa se reforma en tiempo real; los ocho números aparecen debajo. Los preajustes cargan las formas clásicas - píldora, blob, hoja, ticket, orgánico - para afinar después.

Cómo usarla

Elige un preajuste o empieza vacío
Píldora, blob, hoja, ticket, orgánico, squircle - un clic carga los valores. O salta los preajustes y arrastra los sliders.
Ajusta los ocho radios
Cuatro horizontales, cuatro verticales. Valores iguales por esquina = un círculo; desiguales = una elipse.
Cambia el tamaño de la vista previa
Alterna entre cuadrado, rectángulo ancho y alto para confirmar que la forma aguanta a distintas razones de aspecto.
Copia el CSS
La declaración `border-radius: a b c d / e f g h;` completa está lista para pegar.

¿Qué es?

Un generador de border-radius construye la declaración CSS completa con los ocho valores posibles - cuatro radios horizontales (uno por esquina) más cuatro verticales. El resultado deja describir cualquier combinación de esquinas circulares y elípticas en una sola declaración. La estética «blob» y de formas orgánicas omnipresente en el diseño web de los 2020s se construye con border-radius asimétricos - baratos de renderizar, GPU-friendly y que escalan sin rasterizar.

Cuándo usarla

Formas decorativas «blob» orgánicas para landings, botones y etiquetas tipo píldora, formas de hoja y ticket para insignias y cupones, esquinas de tarjeta asimétricas (arriba-izq afilado, abajo-der redondo) para diseños en capas, aproximaciones de squircle para iconos estilo iOS, y cualquier sitio donde un simple `border-radius: 8px` resulta demasiado plano.

Errores comunes

Olvidar `overflow: hidden` en el padre - imágenes hijas y contenido posicionado absolutamente se salen por los bordes redondeados. Usar radios en píxeles en elementos de ancho flexible - el radio no escala con el elemento. Apilar border-radius con `clip-path` - los dos interactúan y suele ganar uno; elige la herramienta adecuada. Animar entre radios muy distintos sin transición - el salto de redondo a recto se ve robotizado.

Preguntas frecuentes

¿Qué significan los ocho valores?: Cuatro radios horizontales (uno por esquina) y cuatro radios verticales (también uno por esquina). Cuando el radio horizontal y vertical de una esquina son iguales, la esquina es un cuarto de círculo. Cuando difieren, es un cuarto de elipse - y eso es lo que da las formas blob orgánicas, las puntas de hoja, los talones de ticket y los iconos squircle estilo iOS.
¿Qué es un squircle?: Una aproximación de rectángulo redondeado más suave de lo que CSS border-radius puede producir nativamente - la forma de icono de la pantalla de inicio de iOS. Lo más cercano en CSS puro es usar radios horizontales y verticales desiguales (algo como `border-radius: 30% 30% 30% 30% / 25% 25% 25% 25%`). Los squircles reales requieren un path SVG o un paint worklet de CSS Houdini - el preajuste aquí es la mejor aproximación en CSS.
¿Por qué la sintaxis con barra?: Sin la barra, todas las esquinas reciben radios circulares (horizontal = vertical). La barra te permite fijar radios horizontales y verticales distintos por esquina, que es justo el sentido de las formas asimétricas. Todos los navegadores la soportan, y es la única forma de conseguir una forma «hoja» (una esquina casi cuadrada, la opuesta casi círculo).
¿Porcentajes o píxeles?: Sí a los porcentajes - escalan con el tamaño del elemento, que es lo que quieres para formas que deben mantener su proporción al crecer. Los píxeles son predecibles pero rompen al redimensionar (un radio de 40 px en un elemento de 30 px se clampea a la mitad del ancho y se vuelve un semicírculo). El generador usa porcentajes para que las formas predefinidas sobrevivan al redimensionado.
¿Los radios grandes rompen en navegadores antiguos?: border-radius está soportado en todos los navegadores desde 2010. La sintaxis con barra para radios asimétricos, desde IE 9. La única pega moderna es el desbordamiento: `border-radius` no recorta el contenido hijo a menos que también pongas `overflow: hidden` en el mismo elemento - si no, imágenes y descendientes en absoluto se salen por las esquinas redondeadas.