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 CSSEn camino
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 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.
Verificar Contraste de Color (WCAG)
Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.
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.