Generador de border-radius CSS
Ajusta esquinas redondeadas de forma visual: enlaza todas las esquinas o ajusta cada una, en px o %, crea círculos y formas orgánicas, y copia código CSS, SCSS o Tailwind.
Cargando Generador de border-radius CSS…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de border-radius CSS
- 1
Abre Generador de border-radius CSS en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
La propiedad CSS border-radius redondea las esquinas de cajas, botones, tarjetas e imágenes. Este generador de border-radius te deja mover controles deslizantes y ver cómo cambia la forma en una vista previa en vivo, y luego copiar el código. Enlaza las cuatro esquinas para un redondeo uniforme, o desenlázalas para dar forma a cada esquina por separado, desde tarjetas sutiles hasta círculos perfectos y formas orgánicas.
Cómo usarlo
- Mueve el control para redondear todas las esquinas a la vez, o desenlaza las esquinas y ajusta cada una.
- Cambia entre px para un redondeo fijo y % para formas que escalan con el elemento.
- Usa los ajustes predefinidos: cuadrado, redondeado, círculo y más, o genera un blob aleatorio.
- Cambia el color de la caja y el fondo de la vista previa para que coincidan con tu diseño.
- Copia el código CSS, SCSS o Tailwind.
Formas habituales
| Forma | CSS |
|---|---|
| Tarjeta sutil | border-radius: 8px; |
| Botón píldora | border-radius: 9999px; |
| Círculo (elemento cuadrado) | border-radius: 50%; |
| Una esquina redondeada | border-radius: 0 24px 0 0; |
| Hoja | border-radius: 0 50% 0 50%; |
Consejos
- Los valores en porcentaje escalan con el tamaño del elemento, así que la forma se mantiene en cualquier pantalla.
- Elementos anidados: da al elemento interior un radio menor que el de su padre (radio exterior menos el padding) para curvas uniformes.
- Las imágenes necesitan overflow: hidden en el padre, o el radio aplicado directamente al img.
- Sé coherente: usa dos o tres tamaños de radio en todo tu sistema de diseño.
Añade profundidad con el generador de sombras CSS y crea maquetaciones con el generador de Flexbox.
Preguntas frecuentes
¿Cómo hago un círculo con CSS?
Da a un elemento cuadrado border-radius: 50%. En un rectángulo, el mismo valor crea una elipse.
¿Puedo redondear solo algunas esquinas?
Sí. Desenlaza las esquinas y ajusta cada una, o usa la sintaxis de cuatro valores: arriba izquierda, arriba derecha, abajo derecha, abajo izquierda.
¿Uso px o %?
Usa px para un redondeo constante en botones y tarjetas, y % para formas que deben escalar con el elemento, como los círculos.
¿Cómo hago un botón en forma de píldora?
Usa un radio muy grande, como 9999px. Las esquinas quedan totalmente redondas sea cual sea la altura del botón.
¿Puedo obtener clases de Tailwind?
Sí. Elige la exportación Tailwind para obtener las clases rounded o valores arbitrarios para tu forma.
¿border-radius funciona en imágenes?
Sí. Aplícalo al elemento img, o a un padre con overflow: hidden.