Generador de Border Radius

Un radio en píxeles es fijo: border-radius: 16px redondea cada esquina exactamente 16 píxeles sin importar el tamaño del elemento. Un radio en porcentaje es relativo — se mide respecto al ancho y alto propios del elemento, así que las esquinas escalan a medida que la caja crece o se reduce. Esa diferencia importa para la forma. Un porcentaje cercano al 50% curva tanto las esquinas que llegan a encontrarse, convirtiendo un cuadrado en un círculo o un rectángulo en una elipse, por eso los avatares y botones redondos usan 50% en lugar de un valor fijo en píxeles. Los píxeles mantienen una suavidad constante y predecible en tarjetas y campos de distintos tamaños; los porcentajes crean formas fluidas que se adaptan. Este generador te permite cambiar de unidad según el diseño (px hasta 200, % hasta 50) y muestra el resultado en vivo, para que veas exactamente qué comportamiento quieres antes de copiar el código.

Para un círculo, aplica border-radius: 50% a un elemento de lados iguales (cuadrado). El porcentaje redondea cada esquina en relación con la caja, y al 50% los cuatro arcos se encuentran para formar un círculo completo — esta es la técnica estándar para avatares redondos y botones de icono. Para una píldora, el truco es distinto: aplica un valor en píxeles muy grande, como 9999px, a un elemento más ancho que alto. El radio queda limitado a la mitad del lado más corto, así que ambos extremos se convierten en semicírculos totalmente redondeados mientras la parte recta del medio se mantiene plana, dando el look clásico de etiqueta o interruptor. Si mantienes el elemento cuadrado, vuelves a obtener un círculo. Esta herramienta incluye preajustes listos de Círculo y Píldora, además de una vista previa en vivo, para que confirmes que la forma se mantiene en el tamaño real de tu elemento antes de pegar el código.

El border-radius estándar asigna un único valor de redondeo a cada esquina. La forma de ocho valores divide cada esquina en un radio horizontal y un radio vertical, separados por una barra: los valores antes de la barra fijan los radios horizontales y los que van después fijan los verticales. Cuando el radio horizontal y vertical de una esquina difieren, el arco se convierte en una curva asimétrica, parecida a un huevo, en lugar de un cuarto de círculo limpio. Combina cuatro esquinas desiguales y el contorno se vuelve suave e irregular — el llamado «blob» orgánico, o las formas squircle y guijarro tan populares en fondos decorativos de interfaces modernas. Son casi imposibles de ajustar a mano porque ocho números interactúan a la vez. Este generador expone los ocho valores, incluye preajustes orgánicos como squircle, guijarro y onda basados en esta sintaxis, y renderiza el resultado en vivo para que ajustes un solo radio y veas cómo cambia la silueta al instante.

Cuando las cuatro esquinas comparten el mismo valor en píxeles, el generador comprueba si ese valor coincide con la escala de radios predeterminada de Tailwind. Si coincide, obtienes la utilidad integrada — por ejemplo, un radio pequeño se mapea a rounded-md, y un valor muy grande se mapea a rounded-full para círculos y píldoras. Cuando el valor no coincide con ningún paso predefinido, la herramienta recurre a la sintaxis de valores arbitrarios de Tailwind, produciendo una clase como rounded-[18px] que incorpora el número exacto. Las esquinas mixtas se gestionan de la misma manera, mapeadas a las utilidades por esquina correspondientes o a valores arbitrarios. Esto te ahorra memorizar la escala o adivinar qué clase con nombre equivale a qué cantidad de píxeles. Además de Tailwind, puedes copiar el shorthand de CSS plano, un template de styled-components o propiedades personalizadas de CSS — elige el formato que use tu proyecto y pégalo directamente.

em y rem son unidades relativas a la tipografía, no absolutas. Un rem equivale al tamaño de fuente raíz, y un em equivale al tamaño de fuente del elemento actual; en una configuración típica, ambos equivalen a 16 píxeles. Así que border-radius: 1rem equivale aproximadamente a un radio de 16px, y 2rem a unos 32px — mucho más redondeado que border-radius: 2px. La ventaja es la escalabilidad: si un usuario o tu sistema de diseño aumenta el tamaño de fuente base, los radios definidos en em o rem crecen proporcionalmente y se mantienen visualmente equilibrados con el texto, mientras que los radios en píxeles quedan congelados. Usa rem cuando quieras esquinas que sigan tu escala tipográfica en todo un tema, y em cuando quieras vincularlas al tamaño de fuente de un solo componente. Este generador calcula em y rem sobre una base de 16px en la vista previa, así que el redondeo que ves coincide con lo que se publica, y puedes cambiar de unidad en cualquier momento para comparar.