Generador de border-radius
Define cada esquina y copia el CSS.
- Se ejecuta en tu navegador — tu texto no se envía a ningún sitio
- Sin registro, sin cuotas, gratis para usar tantas veces como quieras
Cómo funciona
border-radius es sencillo hasta que quieres tres esquinas redondeadas y una cuadrada, y entonces todo el mundo tiene que buscar el orden de los cuatro valores.
El orden, de una vez por todas
Arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda: en sentido horario empezando por arriba a la izquierda. El mismo orden horario desde arriba a la izquierda se aplica también a las formas abreviadas de margin, padding y border, lo que vale la pena memorizar una sola vez.
Píxeles o porcentaje
Los píxeles dan la misma curva sea cual sea el tamaño del elemento. Los porcentajes son relativos al ancho y al alto del propio elemento, así que la curva escala, y un radio del 50% en un cuadrado da un círculo perfecto, que es el truco estándar para los avatares redondos.
La forma de píldora
Un radio mayor que la mitad de la altura del elemento se limita exactamente a la mitad, por eso border-radius: 999px produce de forma fiable una píldora sea cual sea la altura. Es más robusto que calcular el valor correcto, porque sigue funcionando cuando cambia el contenido.
Cuando las esquinas se ven mal en elementos anidados
Una caja redondeada dentro de otra caja redondeada necesita un radio menor en la interior, reducido en el padding que hay entre ambas, o las curvas no quedarán concéntricas. Es un detalle pequeño que hace que las tarjetas se vean bien hechas.
Generador de border-radius: preguntas
¿En qué orden van los cuatro valores?
Arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda: en sentido horario desde arriba a la izquierda.
¿Cómo hago un círculo perfecto?
border-radius: 50% en un elemento que sea exactamente cuadrado.
¿Cómo hago un botón en forma de píldora?
Usa un valor grande como 999px. Los navegadores lo limitan a la mitad de la altura, así que funciona con cualquier tamaño.
¿Debo usar píxeles o porcentaje?
Píxeles para una curva constante; porcentaje cuando quieres que escale con el elemento.
¿Funciona en todas partes?
Sí. border-radius se admite sin prefijo desde hace mucho más de una década.