Generador de border-radius CSS

Funciones

• Las cuatro esquinas ajustables por separado, con previa al momento
• Tres unidades: px, rem y porcentaje
• Si las cuatro coinciden, se abrevia a un solo valor, igual que se escribe a mano
• Al pasar a porcentaje se ve directamente que se convierte en elipse
• Los valores se recortan: los negativos van a cero y los enormes se frenan en 999, sin producir CSS inválido
• Debajo aparece la regla CSS lista para copiar, con el selector `.rounded`
• El código lleva coloreado de sintaxis y un botón de copiar
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Elige la unidad (normalmente px o rem)
2. Rellena una a una las cuatro esquinas; la previa cambia al momento
3. Si quieres ver el efecto del porcentaje, cambia la unidad a % y fíjate en que es una elipse
4. Cuando te convenza, pulsa el botón de copiar y llévate el CSS

Preguntas frecuentes

¿Por qué un 50% no me da un círculo?

Porque el porcentaje de `border-radius` se calcula en las dos direcciones por separado: en horizontal, un porcentaje del ancho del elemento, y en vertical, un porcentaje de su alto. Cuando la caja no es cuadrada los dos radios son distintos y sale una elipse. Para un círculo hay dos vías: hacer que la caja sea cuadrada (ancho y alto iguales) y usar `50%`, o usar un valor en píxeles mayor que la mitad del lado corto (`9999px`), que el navegador recorta a la mitad del lado corto — lo que da una forma de cápsula, y es la manera habitual de construir una.

¿A qué esquina corresponde cada uno de los cuatro valores?

Empieza por arriba a la izquierda y sigue en sentido horario: `border-radius: arriba-izquierda arriba-derecha abajo-derecha abajo-izquierda`. Con tres valores es "arriba-izquierda, arriba-derecha y abajo-izquierda, abajo-derecha"; con dos, "arriba-izquierda y abajo-derecha, arriba-derecha y abajo-izquierda"; y con uno solo, las cuatro iguales. Esta herramienta escribe un valor cuando las cuatro coinciden y cuatro cuando no, igual que la propia abreviatura de CSS: el resultado se lee como lo habría escrito una persona.

¿Es seguro usar `9999px` para un botón de cápsula?

Sí, y es lo habitual. El navegador recorta el radio a la mitad del lado corto, así que por muy alto que sea el botón, `9999px` da siempre dos extremos semicirculares perfectos. Es más robusto que `50%`, cuya forma cambia con la proporción (y puede volverse una elipse), mientras que `9999px` es siempre una cápsula. El único precio es que el número queda un poco exagerado.

¿El radio afecta al rendimiento?

El radio en sí, apenas. Pero hay un caso que conviene tener en cuenta: poner un radio a un elemento que se está animando añade un recorte (clip) y en equipos modestos puede costar fotogramas. Si el radio no cambia durante la animación, puedes moverlo a una capa padre que no se repinte. Con la composición por GPU, un `border-radius` moderno es barato y la mayoría de los proyectos no necesita cambiar nada de estructura por él.