Generador de border-radius
Crea formas CSS border-radius de forma visual y copia el código.
Próximos pasos recomendados
Herramientas relacionadas
Convierte colores entre HEX, RGB y HSL, y comprueba el contraste WCAG.
Prueba una expresión regular contra texto y ve las coincidencias y los grupos de captura.
Codifica o descodifica texto a base64 y viceversa, con una variante apta para URL.
Preguntas frecuentes
Aplica la propiedad border-radius a un elemento. Un solo valor como border-radius: 12px; redondea las cuatro esquinas por igual. Arrastra los controles deslizantes aquí, observa la vista previa en vivo y copia la declaración generada directamente en tu hoja de estilos.
La barra separa los radios horizontales de los verticales, generando esquinas elípticas en lugar de circulares. La forma es border-radius: h-tl h-tr h-br h-bl / v-tl v-tr v-br v-bl. Activa «Esquinas elípticas» para ajustar cada eje de forma independiente y la herramienta escribe la sintaxis con barra por ti.
Los píxeles dan un radio de esquina fijo sin importar el tamaño del elemento, ideal para botones y tarjetas. Los porcentajes son relativos a las dimensiones del elemento: un 50 % en un cuadrado lo convierte en círculo, útil para píldoras y avatares que deben escalar. Cambia de unidad en la parte superior de la herramienta.
No. El generador funciona por completo en tu navegador. La vista previa se renderiza localmente con CSS simple y nada de lo que escribes se envía a un servidor ni se almacena.
Última actualización: 2026-06-23.