Border Radius Generator
Generate CSS rounded border code
Border Radius
La propiedad border-radius permite crear esquinas redondeadas en los elementos. Puedes especificar valores diferentes para cada esquina para crear formas únicas.
Generador de Border Radius CSS - Crear Esquinas Redondeadas
¿Cómo funciona border-radius en CSS?
Border-radius define el radio de curvatura de las esquinas de un elemento. La sintaxis simple (border-radius: 10px) aplica el mismo radio a las 4 esquinas. La sintaxis completa permite especificar cada esquina: border-radius: top-left top-right bottom-right bottom-left. Cada esquina puede tener dos valores (horizontal/vertical) para crear elipses: border-radius: 50% / 25% crea óvalos. El valor 50% en un cuadrado crea un círculo perfecto. Los navegadores modernos soportan border-radius sin prefijos (-webkit, -moz ya no son necesarios). Esta herramienta te permite ajustar visualmente cada esquina y generar el CSS correspondiente.
Patrones comunes de border-radius
Diseños frecuentes incluyen: botones pill/cápsula (border-radius: 9999px o 50vh), círculos perfectos (50% en elementos cuadrados), tarjetas con esquinas suaves (8-16px típicamente), esquinas superiores redondeadas para tabs (border-radius: 8px 8px 0 0), elementos semicirculares (50% en un lado, 0 en otro), formas orgánicas con valores asimétricos diferentes en cada esquina. Para mantener consistencia en tu diseño, define variables CSS: --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; y úsalas sistemáticamente.
Consideraciones de rendimiento y accesibilidad
Border-radius es eficiente y no impacta rendimiento significativamente, incluso con valores complejos. Sin embargo, combinar con box-shadow, filter, o backdrop-filter en muchos elementos puede afectar rendering. Para accesibilidad, las esquinas redondeadas son generalmente positivas: suavizan la interfaz y son menos agresivas visualmente. Asegúrate de que el contenido no se recorte en las esquinas (especialmente imágenes). Con overflow: hidden y border-radius grande, el contenido puede cortarse inesperadamente. Prueba con zoom del navegador.
Preguntas frecuentes
¿Por qué mi border-radius no hace un círculo perfecto?
Para un círculo, el elemento debe ser cuadrado (mismo width y height) con border-radius: 50%. Si el elemento es rectangular, 50% crea una elipse, no un círculo. Para imágenes, considera usar clip-path: circle(50%) o asegura que el contenedor sea cuadrado con object-fit: cover para la imagen.
¿Cómo hago solo dos esquinas redondeadas?
Usa la sintaxis de 4 valores en orden: top-left, top-right, bottom-right, bottom-left. Ejemplo: border-radius: 20px 20px 0 0 redondea solo arriba. Para un lado: border-radius: 20px 0 0 20px redondea solo la izquierda. Esta herramienta te permite ajustar cada esquina independientemente.
¿Qué diferencia hay entre px, %, y em para border-radius?
px: valor absoluto, siempre igual independiente del tamaño del elemento. %: relativo al elemento, 50% es medio del ancho/alto respectivo. em: relativo al font-size, escala con el texto. Para botones y tarjetas, px es predecible. Para elementos que escalan (avatares responsive), % es mejor. em es útil si quieres que el redondeo escale con el tamaño del texto.
¿Puedo animar border-radius?
Sí, border-radius es animable con CSS transitions y animations. transition: border-radius 0.3s ease permite animaciones suaves al hover. Puedes crear efectos como cuadrado-a-círculo o morphing de formas. El rendimiento es bueno para animaciones simples, pero evita animar simultáneamente con propiedades costosas como filter o box-shadow complejos.