Generador de Border Radius

Cómo funciona

Cada esquina CSS es un cuarto de elipse, y esa sola frase explica buena parte de la propiedad. En modo Simple un radio se aplica a las cuatro esquinas; en modo Por esquina cada una tiene el suyo; en modo Blob cada esquina recibe un radio horizontal y otro vertical independientes, escritos con barra —la izquierda de la barra son los cuatro radios horizontales, la derecha los cuatro verticales, siempre en orden superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda.

Anatomía de la sintaxis con barra

border-radius: 40% 60% 70% 30% / 30% 50% 70% 40% se lee: radios horizontales SI SD DI BI, luego radios verticales SI SD DI BI. Cuando ambos lados son iguales la barra simplemente desaparece del shorthand —por eso el generador la omite automáticamente. Cada esquina dibuja entonces su cuarto de elipse con su radio horizontal y vertical, y así surgen los blobs asimétricos.

50% frente a px en cajas no cuadradas

Los porcentajes se resuelven por eje, así que 50% en una caja de 240×160 significa una elipse de 120×80 en cada esquina —estadio, no círculo. Un radio en px permanece perfectamente circular sea cual sea la caja, pero necesita al menos la mitad del lado más corto para lograr el look completamente redondo; cualquier valor mayor da la misma forma, y los px enormes explícitos no desbordan porque el navegador los escala proporcionalmente.

Por qué 9999px crea una cápsula

Los botones píldora se redondean con un radio deliberadamente imposible: 9999px se recorta a la mitad del lado más corto —la regla de la especificación dice que cuando los radios adyacentes de un borde superan su longitud, todos los radios se reducen por el mismo factor. Resultado práctico: en una píldora de 240×88 cada esquina pasa a cuarto de círculo de 44px, los dos bordes largos desaparecen y sale la cápsula. El número exacto da igual; solo importa que sea grande.

Preguntas frecuentes