⬜Generador interactivo de código CSS Border Radius

¿Qué es el Generador de CSS Border Radius?

La propiedad border-radius parece simple hasta que necesitas esquinas distintas, radios elípticos, o una forma orgánica tipo "blob" — ahí es fácil perderse en el orden de los valores y la sintaxis con "/". Este generador de border radius tiene un editor visual con vista previa en vivo para las 4 esquinas (incluyendo radios elípticos horizontal/vertical independientes), y en el Modo 2 una galería de formas predefinidas (círculo, píldora, tarjeta, burbuja de chat, blob aleatorio) que puedes cargar con un clic, sin escribir una sola línea de CSS a mano.

¿Cómo se ordenan los valores de border-radius?

El orden es siempre en sentido horario empezando por la esquina superior izquierda — el mismo orden que usan margin y padding cuando se especifican 4 valores. Si los 4 valores son iguales, puedes escribir solo uno.

Guía paso a paso: cómo generar tu border-radius personalizado

1) Escribe el radio deseado — si quieres el mismo valor en las 4 esquinas, deja "¿Mismo Radio en las 4 Esquinas?" en "Sí". 2) Si necesitas esquinas distintas, cambia esa opción a "No" y personaliza cada una por separado, incluyendo radios elípticos horizontal/vertical independientes con el checkbox correspondiente. 3) La vista previa en vivo y el código CSS se actualizan al instante. Si prefieres partir de una forma ya conocida en vez de definir valores desde cero, cambia al Modo 2: Galería de Formas y elige entre círculo, píldora, tarjeta, burbuja de chat o un blob orgánico aleatorio.

¿Qué son los radios elípticos?

Por defecto, cada esquina de border-radius es un cuarto de círculo (el mismo radio horizontal y vertical). Pero CSS permite especificar un radio horizontal y uno vertical distintos por esquina, separando dos listas de 4 valores con "/" — esto crea curvas elípticas en vez de circulares, la base de formas orgánicas como los "blobs" que se ven en ilustraciones y fondos decorativos modernos.

Formas comunes con border-radius

Un círculo perfecto necesita un elemento cuadrado (ancho = alto) con radio del 50%. Una píldora (stadium shape, muy usada en botones) necesita un radio igual a la mitad de la altura del elemento. Una burbuja de chat suele tener 3 esquinas redondeadas y una más cuadrada, apuntando hacia el interlocutor. El Modo 2 aplica automáticamente las proporciones correctas para cada una de estas formas.

Casos de uso: dónde aplicar border-radius con criterio

El radio de esquina es una de las decisiones de diseño más repetidas de una interfaz: tarjetas de producto o contenido, botones de llamada a la acción, avatares e imágenes de perfil circulares, badges y etiquetas tipo píldora, y modales o tooltips con esquinas suavizadas. Mantener un radio consistente en toda la interfaz (por ejemplo, definido como variable CSS) es clave para una sensación de coherencia visual — si también estás definiendo una escala de espaciado consistente para acompañar tus radios, la calculadora de espaciado UI con proporción áurea genera esa progresión automáticamente.

Errores comunes al usar border-radius

El error más frecuente es intentar crear un círculo perfecto sin que el elemento sea cuadrado (ancho = alto), lo que produce una elipse en vez de un círculo. Otro error habitual es olvidar el orden horario de las 4 esquinas al personalizarlas individualmente, invirtiendo por accidente esquinas opuestas. Y un tercer error: usar valores de radio muy altos en elementos pequeños sin darse cuenta de que el navegador los reduce automáticamente para evitar solapamientos, lo que puede dar un resultado distinto al esperado si no se entiende ese comportamiento.

Border-radius y sombras: un dúo habitual

Las tarjetas y botones con esquinas redondeadas casi siempre se combinan con una sombra sutil para reforzar la sensación de profundidad — si es tu caso, el generador de sombreado CSS Box Shadow te permite ajustar esa sombra con presets de elevación tipo Material Design, coherentes con el mismo lenguaje visual redondeado.

Compatibilidad de navegadores y consejos profesionales

border-radius tiene soporte universal en todos los navegadores modernos desde hace más de una década, incluyendo la sintaxis elíptica con "/", por lo que no necesitas prefijos de proveedor ni comprobaciones especiales de compatibilidad. Un consejo profesional habitual: al aplicar border-radius a un elemento con overflow: hidden (por ejemplo, para recortar una imagen hija a la misma forma redondeada), recuerda que el recorte solo funciona si el radio se declara en el contenedor padre, no en la imagen — un error de posicionamiento muy común al maquetar tarjetas con imagen de cabecera. Otro consejo: para animar un cambio de forma (por ejemplo, de cuadrado a círculo al hacer hover), anima directamente la propiedad border-radius con una transición CSS — el navegador interpola los valores de forma fluida sin necesidad de JavaScript.

Preguntas Frecuentes (FAQ)