Generador de border-radius
Crea border-radius CSS con vista previa visual.
Esquinas (horizontal)
border-radius: 16px;Generador de esquinas redondeadas CSS (border-radius)
La propiedad CSS border-radius permite redondear las esquinas de cualquier elemento HTML, creando desde sutiles esquinas redondeadas hasta formas circulares completas. Es una de las propiedades más utilizadas en diseño web moderno, presente en prácticamente todos los sitios web y aplicaciones actuales. Botones, tarjetas, avatares, imágenes y contenedores se benefician de esquinas redondeadas que suavizan la interfaz y crean diseños más amigables y modernos.
Nuestro generador te permite ajustar cada esquina individualmente o enlazarlas para cambiar todas a la vez. También soporta border-radius elíptico (modo avanzado), que utiliza la sintaxis de 8 valores para crear formas orgánicas y asimétricas más complejas. La sintaxis elíptica define radios horizontales y verticales separados por una barra "/", permitiendo crear formas como gotas, hojas y otras figuras orgánicas imposibles de lograr con radios uniformes.
La herramienta incluye presets comunes como cuadrado, redondeado, píldora, hoja, gota y ticket, que puedes usar como punto de partida y personalizar a tu gusto. La vista previa se actualiza en tiempo real y el código CSS se genera automáticamente, listo para copiar y pegar en tu proyecto.
Preguntas frecuentes
¿Qué es el border-radius elíptico?
El border-radius elíptico usa la sintaxis de 8 valores: los primeros 4 definen los radios horizontales y los últimos 4 los verticales, separados por "/". Esto permite crear esquinas con curvas asimétricas, produciendo formas orgánicas más complejas que el border-radius básico.
¿Cómo hago un círculo perfecto?
Para crear un círculo perfecto, establece border-radius: 50% en un elemento con el mismo ancho y alto. En nuestro generador, usa el preset "Píldora" (100px en todas las esquinas) y asegúrate de que tu elemento sea cuadrado.
¿Es compatible con todos los navegadores?
Sí, border-radius es compatible con todos los navegadores modernos desde hace años, incluyendo Chrome, Firefox, Safari, Edge y Opera. No se necesitan prefijos de proveedor para ningún navegador actual.