Generador de border radius CSS
Crea un border-radius en CSS con vista previa: redondea cada esquina por separado en píxeles o porcentaje y copia el código. Gratis y en tu navegador.
Qué hace esta herramienta
Generador de border radius con vista previa en vivo. Ajusta las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda por separado, cambia entre píxeles y porcentaje y mira cómo se redondea una caja de ejemplo en tiempo real. La regla border-radius aparece lista para copiar y todo ocurre en tu navegador.
Para qué te sirve
- Redondear las esquinas de una tarjeta, un botón o una imagen en una landing.
- Hacer un botón con forma de píldora subiendo las esquinas en porcentaje.
- Crear una forma asimétrica con un radio distinto en cada esquina.
- Probar las esquinas antes de pegar la regla en tu hoja de estilos o tu tema de Tailwind.
Cómo se usa
- Ajusta el radio de las esquinas superior izquierda y superior derecha.
- Ajusta el radio de las esquinas inferior derecha e inferior izquierda.
- Elige píxeles para un radio fijo o porcentaje para uno que escale con la caja.
- Mira la vista previa en vivo y copia la regla border-radius de abajo.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Combina bien con
Otras herramientas que la gente suele usar en el mismo flujo.
- Generador de sombras CSS
crear sombras CSS
Una vez tienes el color base.
- Generador de Gradientes CSS
crear gradientes CSS
Una vez tienes el color base.
- Conversor de Color: HEX, RGB, HSL
convertir colores entre HEX, RGB y HSL
Para elegir los colores del degradado.
- Generador de Paletas de Color
generar paletas de colores
Para elegir los colores del degradado.
Otras herramientas del mismo campo
DiseñoGenerador de sombras CSS
Crea una sombra box-shadow en CSS con vista previa: ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad, y copia el código. Gratis y en tu navegador.
Generador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
Conversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Generador de Paletas de Color
Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.
Preguntas frecuentes
¿En qué orden se escriben las cuatro esquinas?
El resultado usa el orden canónico de CSS: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Ese orden en sentido horario, empezando por la superior izquierda, es el que espera el border-radius en formato largo, así que la regla que copias aplica cada valor a la esquina que ajustaste.
¿Qué diferencia hay entre píxeles y porcentaje?
Un radio en píxeles mantiene el mismo tamaño mida lo que mida la caja. Un radio en porcentaje es relativo a la caja, así que un 50 por ciento en cada esquina convierte un cuadrado en un círculo y un rectángulo en una píldora. Elige porcentaje cuando quieras que el redondeo escale con el elemento.
¿Cómo hago un círculo perfecto o una píldora?
Pon todas las esquinas al 50 por ciento. En una caja cuadrada da un círculo; en una caja más ancha da una píldora o cápsula. Cambia primero la unidad a porcentaje y luego sube las esquinas a 50.
¿Puedo usar el CSS generado tal cual?
Sí. El resultado es una declaración border-radius completa que puedes pegar directamente en tu hoja de estilos, en una variable CSS o en un valor arbitrario de Tailwind. Siempre escribe las cuatro esquinas en formato largo, así que cada esquina conserva el valor que elegiste.