Generador de Border Radius

Da forma a las esquinas con más control

El radio del borde es una de las formas más rápidas de cambiar la personalidad de una interfaz. Los valores pequeños transmiten precisión y estructura, los medios hacen que tarjetas y botones resulten más amables, y los grandes permiten crear píldoras, formas orgánicas o paneles ilustrados con un toque divertido. Este generador de border radius expone la sintaxis CSS completa para que puedas diseñar tanto rectángulos redondeados habituales como esquinas elípticas sin escribir a mano la notación con barra.

Cada esquina tiene un radio horizontal y otro vertical. Cuando los valores son iguales, la esquina es circular y el CSS se parece a la conocida declaración border-radius de cuatro valores. Cuando X e Y difieren, la esquina se vuelve elíptica y el CSS escribe primero los valores horizontales, luego una barra y después los verticales. La vista previa en vivo aclara esta relación, porque la forma cambia al instante a medida que mueves cada control.

Cuándo resultan útiles los radios elípticos

Las esquinas elípticas son útiles cuando quieres algo más orgánico que una simple tarjeta, pero necesitas un CSS ligero y adaptable. Pueden hacer que avatares, destacados, formas de cupón, máscaras de imagen y paneles decorativos resulten menos genéricos. Las esquinas asimétricas también ayudan a crear una dirección visual que atrae la atención hacia un titular o una llamada a la acción. Usa el preset blob como punto de partida y luego reduce los valores más fuertes si la forma empieza a distraer del contenido.

Usar los valores de radio con coherencia

En los sistemas de diseño de producción conviene mantener un pequeño conjunto de radios estándar para los componentes cotidianos y usar valores personalizados solo cuando la forma tenga un propósito claro. Un botón, un campo de entrada y una tarjeta suelen verse más coherentes si comparten tamaños de esquina relacionados. Las secciones decorativas pueden ser más expresivas, pero deben responder bien a distintos anchos. Tras copiar el CSS generado, pruébalo con el tamaño real del elemento: un radio que se ve equilibrado en la tarjeta de vista previa puede resultar demasiado fuerte en una insignia compacta o demasiado sutil en un panel hero ancho.