Ajustar radios de las cuatro esquinas

Con Radio de borde, diseñadores y desarrolladores de interfaces pueden ajustar una interfaz antes de implementarla. Ajusta por separado el radio de cada una de las cuatro esquinas.

Ajusta por separado el radio de cada una de las cuatro esquinas. La herramienta es gratuita en el navegador y muestra el resultado sin pedirte una cuenta.

Cómo usar

Introduce el valor del radio para la esquina superior izquierda y, a continuación, las otras tres esquinas en el orden indicado.
Utiliza una unidad como px, em o porcentaje, y mantén la misma unidad para las cuatro esquinas.
Haz clic en el botón generar para producir la regla CSS border-radius correspondiente.
Lee el resultado, que combina los cuatro valores, y cópialo en tu hoja de estilos.
Prueba el renderizado en un elemento de muestra antes de añadirlo a tu página.

Ejemplo

La entrada de ejemplo utiliza cuatro valores de esquina diferentes. Después de generar, el resultado muestra la propiedad border-radius correspondiente. Puedes comparar este resultado con tus propios valores para confirmar el orden de las esquinas antes de pegarlo en tu código.

Límites y formatos

La herramienta no dibuja una caja en pantalla; solo produce la regla CSS para copiar.
Los valores deben ser numéricos y cero o positivos; la propiedad CSS no acepta valores negativos.
Mezclar unidades puede hacer que el navegador ignore el resultado.
Comprueba siempre el renderizado final en tu página, porque el contexto del elemento puede afectar al efecto visual.

Dónde se procesa

Todo se ejecuta en tu navegador. Los valores que introduces nunca se suben ni se almacenan. El cálculo y el formato de la regla CSS se realizan localmente, sin comunicación externa.

Preguntas frecuentes

¿En qué orden debo introducir los cuatro valores?

El orden esperado es superior izquierda, superior derecha, inferior derecha, inferior izquierda. Este es el orden estándar de la propiedad border-radius. Si intercambias dos valores, el renderizado será diferente. Comprueba el resultado mostrado para confirmarlo.

¿Puedo usar porcentajes?

Sí, se aceptan porcentajes. Crean esquinas redondeadas proporcionales al tamaño del elemento. Mantén la misma unidad para las cuatro esquinas para evitar un resultado inconsistente.

¿El resultado está listo para pegar en mi archivo CSS?

Sí, el resultado es una propiedad CSS completa. Puedes copiarlo y pegarlo en tu hoja de estilos. Solo asegúrate de que no lo sobrescriba otra regla.