Generador de CSS border-radius

La sintaxis completa de border-radius

En su forma simple, border-radius: 12px; aplica el mismo radio a las cuatro esquinas. Pero CSS soporta una sintaxis larga muy poderosa:

border-radius: 12px 24px 12px 24px;
/* sup-izq, sup-der, inf-der, inf-izq (sentido reloj desde arriba a la izquierda) */

border-radius: 60% 40% 30% 70% / 30% 60% 40% 70%;
/* radios horizontales / radios verticales — formas blob */

px, %, em: cuál usar y cuándo

• px: radio fijo, predecible. Ideal para botones, cards, inputs. 8px son siempre 8px.
• %: radio relativo al tamaño del elemento. 50% en un cuadrado da un círculo perfecto. Útil para avatares y elementos circulares en general.
• em / rem: escala con el font-size. Útil si tu sistema de diseño usa una unidad rítmica (8px de base, 16px, etc.).
• 9999px: truco común para "pill shape": un radio absurdamente grande que siempre alcanza la mitad de la altura, generando bordes redondos perfectos sin importar el alto del elemento.

Qué radio usar para qué componente

1. Inputs y botones: 6-10px. Más alto se siente "infantil"; más bajo se siente "anticuado".
2. Cards: 12-16px. Más generoso que botones para diferenciar jerarquía.
3. Modales y popovers: 16-24px. Comunican que son elementos flotantes.
4. Avatares: 50% (circular) o 8px (cuadrados con esquinas suaves, estilo Telegram/Linear).
5. Tags y badges: 9999px (pill) o 4-6px (rectangular).

Border-radius en design systems

Los design systems serios definen una escala de radios, no usan valores arbitrarios: --radius-xs: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;. Eso evita que cada componente termine con un radio distinto y rompa la consistencia. Tailwind hace esto built-in con rounded-sm, rounded, rounded-lg, etc.

El truco de las formas blob

La sintaxis border-radius: A% B% C% D% / E% F% G% H% permite radios horizontales y verticales distintos. Combinaciones asimétricas dan formas orgánicas que se volvieron muy populares en landings de SaaS. Ejemplo: 30% 70% 70% 30% / 30% 30% 70% 70%. Pero usalas con criterio: animadas son lindas, estáticas en exceso pueden sentirse aleatorias.

Border-radius en imágenes y backgrounds

Funciona perfecto en <img> y elementos con background-image. Importante: overflow: hidden en el contenedor si querés cortar contenido que sobresalga (ej: una imagen dentro de una card con bordes redondeados). Para SVG, usá clip-path en vez de border-radius.