Generador de border-radius CSS — visual
Crea border-radius de CSS de forma visual con cuatro sliders de esquina, px o %, y esquinas elípticas: vista previa y código listo, en tu navegador.
🔒 Funciona por completo en tu navegador. Tu entrada y salida no se envían a ningún servidor ni se guardan: totalmente privado.
Acerca de esta herramienta
Este generador de border-radius te permite redondear las esquinas de una caja de forma visual y copiar el CSS exacto. Arrastra los controles de las cuatro esquinas a la vez o da forma a cada una por separado, alterna entre píxeles y porcentajes e incluso define radios elípticos con valores horizontal y vertical distintos. Una vista previa en vivo se actualiza a medida que trabajas, y debajo aparece la regla border-radius lista para pegar. Es la manera rápida de diseñar botones, tarjetas y avatares sin escribir los valores a mano, y todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Cuál es la diferencia entre un radio en píxeles y uno en porcentaje?
Un radio en píxeles es una curva fija que mantiene el mismo tamaño por grande que sea la caja, lo que conserva las esquinas coherentes entre elementos. Un radio en porcentaje es relativo al propio ancho y alto de la caja, así que escala a medida que el elemento crece. El truco clásico es border-radius: 50%, que convierte un cuadrado en un círculo perfecto y cualquier rectángulo en una elipse: ideal para avatares redondos y botones tipo píldora.
¿Qué son las esquinas elípticas y la barra en el CSS?
Una esquina elíptica usa dos radios distintos —uno horizontal y otro vertical—, de modo que la curva puede ser más ancha que alta, o al revés. En CSS, esos pares se escriben con una barra, como en border-radius: 40px / 20px, donde los valores antes de la barra fijan los radios horizontales y los de después, los verticales. Te permite crear formas suaves, estiradas o asimétricas que un solo radio no puede lograr, y el generador escribe la sintaxis por ti.
¿Puedo copiar el CSS directamente en mi proyecto?
Sí. La herramienta genera una declaración border-radius estándar que puedes pegar directamente en tu hoja de estilos, y la propiedad es compatible con todos los navegadores modernos. Todo se calcula localmente en tu navegador mientras arrastras, así que nada de lo que diseñas se sube: tanto la vista previa como el código generado se producen por completo en tu dispositivo. Copia la regla, ponla en tu CSS y ajusta los números más tarde si lo necesitas.