Generador de Border Radius CSS

¿Qué es border-radius?

La propiedad CSS border-radius redondea las esquinas de un elemento. Un valor redondea las cuatro esquinas por igual, mientras que cuatro valores definen superior izquierda, superior derecha, inferior derecha e inferior izquierda en el sentido de las agujas del reloj. Usar porcentaje hace que el radio sea relativo al tamaño de la caja, así que 50 por ciento en un cuadrado produce un círculo y en un rectángulo produce una elipse.

Combinar valores distintos por esquina da formas de hoja, de píldora o de mancha sin imágenes ni SVG. Este generador muestra el resultado en vivo y produce la declaración válida más corta, reduciéndola a un solo valor cuando todas las esquinas coinciden.

Cómo usar el generador

1. Arrastra un control para cada esquina, o marca la opción de enlazar para mover las cuatro juntas.
2. Cambia entre px y porcentaje para ver cómo la unidad cambia la forma.
3. Copia el CSS y pégalo en tu hoja de estilos.

Casos de uso comunes

• Tarjetas y botones - define un aspecto redondeado coherente para los componentes de la interfaz.
• Avatares - usa 50 por ciento para convertir una imagen cuadrada en un círculo.
• Formas decorativas - crea formas de hoja y de globo de diálogo con esquinas desiguales.