Generador Border Radius CSS Gratis: Esquinas Redondeadas Visual

A border-radius: 50% convierte un elemento cuadrado en un círculo perfecto.

A Sí, cada esquina tiene su propio valor: border-top-left-radius, border-top-right-radius, etc.

A Al hacer clic en el botón 'desvincular', se desconectan los controles de cada esquina. Esto significa que puedes ajustar el radio de una esquina sin afectar a las demás. Verás que los cuatro campos de entrada se vuelven independientes. Es útil para crear diseños asimétricos.

A Sí, puedes cambiar entre píxeles y porcentajes en el generador. Los porcentajes son relativos a las dimensiones del elemento, no al radio en sí. Un valor de 50% en una caja de 200px de ancho crea un radio de 100px en las esquinas. Esto importa sobre todo en diseños responsivos donde el tamaño del elemento cambia. Usa porcentajes cuando tu diseño necesite escalar de forma fluida entre pantallas.

A Si usaste valores en píxeles, el radio queda fijo sin importar el tamaño de pantalla. En un teléfono, un radio de 40px se ve enorme comparado con el escritorio. Cambia a porcentajes: escalan con el elemento. Por ejemplo, 10% se mantiene proporcional, tenga tu botón 150px o 300px de ancho. Prueba tu diseño primero en la vista previa responsive del generador.

A Este generador produce propiedades CSS estándar, no propiedades personalizadas como `--radius: 20px`. Tendrías que envolver manualmente el resultado en una llamada `var()` dentro de tu hoja de estilos. Pega el código, reemplaza el valor con `var(--mi-radio)`. La herramienta sirve para ajustes visuales rápidos — para variables CSS, copia los valores tú mismo. Te tomará unos 30 segundos.

A Las esquinas redondeadas usan aceleración GPU en navegadores modernos, así que son más rápidas que sombras o degradados complejos. Pero apilar 50 elementos con border-radius en un teléfono viejo descargará la batería rápido. He visto freelancers poner más de 50 tarjetas redondeadas en una página — ahí es cuando notas el lag. Mantén menos de 30 elementos con radios menores a 20px para Android baratos. Prueba en un Moto G de 2019 para estar seguro.

A No, no hay atajo de teclado para eso. Tendrás que hacer clic en el botón de restablecer o poner cada esquina a 0 manualmente. He visto freelancers perder diez minutos ajustando esquinas que querían reiniciar — solo dale al icono de reinicio en la esquina superior derecha. Borra todos los campos al instante.

A Solo si el elemento es un cuadrado perfecto y pones todas las esquinas al 50%. En una caja de 200x200px, border-radius: 50% crea un círculo verdadero. Pero en un rectángulo de 300x200px, el 50% genera un óvalo — los radios horizontal y vertical son distintos. El generador lo muestra en vivo: arrastra un control deslizante sobre una caja rectangular. Verás que se transforma en una forma de píldora cuando las cuatro esquinas llegan al 50%. Eso no es un error, es cómo funciona la matemática de CSS.

A Para eso está el botón de desvincular. Haz clic en él para separar las cuatro esquinas, luego ajusta la superior izquierda y la inferior derecha al radio deseado mientras dejas las otras dos en 0. Para un efecto hoja en un botón de 120px de ancho, prueba con 60px en esas esquinas diagonales. Obtendrás un contorno de gota suave. La vista previa se actualiza al instante, así que juega con los controles hasta que la forma se vea orgánica. Si te pierdes, el icono de reinicio lo devuelve todo a cero.