Generador Border Radius CSS Gratis: Esquinas Redondeadas Visual

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.

A Las versiones antiguas de Firefox tenían un error de redondeo de subpíxeles que hacía ver las curvas dentadas bajo 4px de radio. Chrome renderiza esos mismos valores con suavizado. Tu código generado no está mal, el motor de renderizado es diferente. Prueba con un radio mínimo de 6px para disimular la diferencia, y añade `-moz-border-radius` solo si necesitas soportar Firefox ESR 102. Para navegadores modernos, la propiedad estándar funciona bien. Siempre reviso el resultado en ambos navegadores antes de enviar algo a un cliente.

A Para nada. Combina porcentajes, píxeles y esquinas desvinculadas para lograr formas orgánicas. Un elemento de 100px con la esquina superior izquierda al 100%, la superior derecha a 20px y las dos inferiores en 0 produce una gota inclinada. Exporta el código y usa clip-path si necesitas curvas cóncavas. Los ajustes preestablecidos del generador te ahorran tiempo al explorar ideas. Cambiar el grosor del borde también altera cómo se percibe la curva.

A Sí, puedes animar los cambios de border-radius al pasar el cursor sobre botones o tarjetas. Añade una duración de transición como 0.3s ease a tu código CSS generado. Cuando el usuario pasa el ratón, las esquinas se transforman sin saltos. Asegúrate de que las unidades iniciales y finales coinciden. Animar de píxeles a porcentajes puede causar un efecto visual extraño a mitad de la transición.

A El código de esta herramienta solo diseña el contenedor, por lo que las fotos se saldrán si no pones overflow hidden. Me pasó esto exacto en un proyecto la semana pasada. Añade `overflow: hidden` justo debajo de la propiedad border-radius en tu CSS. Eso obliga a que la imagen respete la curva sin salirse por las esquinas. Pruébalo con una foto real para verificar el resultado.