Generador de border-radius CSS
Controla las cuatro esquinas de una caja y observa el resultado en tiempo real. Puedes vincularlas para un redondeo uniforme o combinarlas para formas asimétricas.
Espacio de trabajo · Generador de border-radius
border-radius: 24% 24% 24% 24%;
En porcentaje, 50 % dibuja un círculo o una elipse según las dimensiones del elemento. El valor 0 elimina el redondeo.
border-radius: 24% 24% 24% 24%;Cómo se usa
Escribe el radio de cada esquina o activa la vinculación para moverlas todas a la vez.
Elige píxeles para un radio fijo o porcentaje para formas relativas al tamaño del elemento.
Copia la regla border-radius y pégala en tu hoja de estilos.
Ejemplos
Tarjeta suave
24 px en las cuatro esquinas es un redondeo habitual para tarjetas y paneles.
Forma de hoja
0 48px 0 48px crea una esquina superior derecha y otra inferior izquierda redondeadas, con las demás rectas.
Lo que conviene saber
La propiedad border-radius acepta de uno a cuatro valores. Con cuatro, el orden es superior izquierda, superior derecha, inferior derecha e inferior izquierda. En porcentaje, el valor se calcula respecto al ancho y al alto, por lo que 50 % produce un círculo o una elipse.
El redondeo recorta el fondo y el borde del elemento, pero no el contenido que se desborda si no hay overflow: hidden. Tenlo en cuenta al colocar imágenes o elementos posicionados en las esquinas.
Preguntas frecuentes
Herramientas relacionadas
Otras herramientas que pueden servirte para tareas similares.
Generador de animaciones CSS
Elige una animación, ajusta duración y curva, y copia los keyframes con reduced-motion.
Generador de sombras CSS
Crea sombras de caja suaves y copia la propiedad box-shadow.
Generador de degradados CSS
Diseña degradados lineales o radiales y copia el CSS.