Generador de border-radius CSS
Arrastra los controles de las cuatro esquinas, mantenlas enlazadas o sepáralas, y activa las esquinas elípticas para formas orgánicas. El CSS se abrevia automáticamente.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Elige px o %.
- Con Enlazar todas las esquinas activado, un solo control mueve las cuatro. Desactívalo para ajustar cada esquina por separado.
- Activa Esquinas elípticas para tener un segundo control con el radio vertical de cada esquina.
- Pulsa Copiar y pega la regla.
Qué significa el resultado
El valor por defecto es border-radius: 24px;: las cuatro esquinas con un radio de 24 px. border-radius: 10px 20px; redondea la superior izquierda y la inferior derecha 10 px y las otras dos 20 px. border-radius: 50% / 25%; da esquinas elípticas.
Ejemplo
Un botón en forma de píldora: elige px, enlaza las esquinas y lleva el control al máximo (200 px); el navegador limita el radio a la mitad de la altura.
Consejos
- Para un círculo perfecto, usa una caja cuadrada y
border-radius: 50%.
- Poner a 0 solo algunas esquinas da pestañas y bocadillos de diálogo.
- Los valores máximos de los controles son 200 px o 100 %.
Preguntas frecuentes
¿En qué orden van los cuatro valores?
Superior izquierda, superior derecha, inferior derecha, inferior izquierda: en el sentido de las agujas del reloj desde arriba a la izquierda. La herramienta abrevia la lista cuando hay repeticiones: cuatro valores iguales quedan en uno, y superior izquierda igual a inferior derecha con superior derecha igual a inferior izquierda quedan en dos.
¿Qué significa la barra?
En modo elíptico el radio tiene una parte horizontal y otra vertical, escritas como horizontal / vertical. Por ejemplo, 50% / 25% convierte cada esquina en una elipse la mitad de alta que de ancha. Si las dos partes son iguales, se omite la barra.
¿Uso px o porcentaje?
Los píxeles mantienen el mismo tamaño de esquina sea cual sea la caja. Los porcentajes escalan con la caja: 50% en un cuadrado da un círculo y en un rectángulo, una elipse.
¿Qué pasa si los radios son mayores que la caja?
El navegador reduce todos los radios en la misma proporción hasta que las esquinas vecinas dejan de solaparse, así que los valores grandes no rompen la forma.