Generador de border-radius CSS
Ajusta el redondeo de cada esquina con deslizadores y mira el resultado en directo. Puedes usar un único radio, uno por esquina o radios elípticos para formas orgánicas, en px, % o rem. Copia el CSS cuando te guste.
Procesado 100% en tu navegador
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Elige el modo: todas iguales, por esquina o elíptico.
- 2Mueve los deslizadores y cambia la unidad si lo necesitas.
- 3Prueba las formas rápidas como píldora, círculo u hoja.
- 4Copia el CSS generado y pégalo en tu hoja de estilos.
Casos de uso
- Redondear tarjetas, botones e imágenes de una interfaz.
- Crear formas de gota u orgánicas para fondos y avatares.
- Hacer un círculo perfecto o un botón en forma de píldora.
- Entender cómo funciona la sintaxis con barra del border-radius.
Preguntas frecuentes
¿Cómo hago un círculo con border-radius?
Usa 50 % en una caja cuadrada. Si la caja es rectangular obtendrás una elipse; para una píldora usa un radio muy grande, como 999 px.
¿Qué significa la barra en 50% / 30%?
Separa los radios horizontales de los verticales. Con ella cada esquina puede ser una elipse en lugar de un cuarto de círculo, lo que permite formas orgánicas.
¿Qué orden siguen los valores?
Empiezan por arriba a la izquierda y van en el sentido de las agujas del reloj: arriba izquierda, arriba derecha, abajo derecha y abajo izquierda.
¿Es mejor usar px, % o rem?
Los px dan un redondeo fijo, el % se adapta al tamaño de la caja (útil para círculos y gotas) y los rem escalan con el tamaño de letra de la página.