Generador de border-radius

Redondea cada esquina por separado o crea formas orgánicas tipo blob (incluso animadas) y copia el CSS o la clase de Tailwind.

¿Qué es border-radius?

border-radius redondea las esquinas de un elemento. Puedes darle un valor para todas o uno por esquina, en el sentido de las manecillas del reloj empezando arriba a la izquierda:

.caja {
  border-radius: 16px;                 /* las 4 esquinas */
  border-radius: 16px 0;               /* sup-izq e inf-der | sup-der e inf-izq */
  border-radius: 24px 24px 0 0;        /* sólo las de arriba */
  border-radius: 50%;                  /* círculo (si el elemento es cuadrado) */
}

Cada esquina en realidad es un trozo de elipse con un radio horizontal y otro vertical. Con la barra / puedes darlos por separado: los 4 valores antes de la barra son los radios horizontales y los 4 de después, los verticales. Así se crean las formas blob:

.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Generador

En Esquinas ajusta cada esquina (desmarca Enlazar para moverlas por separado). En Blob juega con los 8 radios, elige una forma o pulsa Aleatorio; activa Animar para que la forma cambie suavemente.

Generador de border-radius

Esquinas

Enlazar las 4 esquinas

Sup. izquierdapxSup. derechapxInf. izquierdapxInf. derechapx

Elemento

AnchopxAltopx

Color DegradadoColor 2

.forma {
  width: 240px;
  height: 240px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  border-radius: 24px;
}

Consejos de uso

• Botones y tarjetas: radios de 6 a 16 px se ven modernos; 999px crea botones tipo "píldora" sin importar el alto.
• Avatares redondos: border-radius: 50% sobre una imagen cuadrada (usa aspect-ratio: 1 y object-fit: cover).
• Consistencia: elige 2 o 3 radios para todo el sitio (por ejemplo 6, 12 y 999 px) y guárdalos en variables.
• Si un elemento tiene hijos que se salen por las esquinas (como una imagen en una tarjeta), añade overflow: hidden al padre.
• Los blobs quedan geniales como decoración detrás de una foto o como fondo de íconos. Con porcentajes, la forma se adapta al tamaño del elemento.
• Cuando los pares opuestos suman 100 % (30 % + 70 %) la forma queda "llena", sin lados rectos.

Buena práctica

Si animas un blob, respeta a quien prefiere menos movimiento con @media (prefers-reduced-motion: reduce). El código generado ya lo incluye.

Error común

border-radius: 50% sólo da un círculo si el elemento es cuadrado. En un rectángulo obtienes un óvalo. Para "píldoras" usa un valor enorme en px (999px) en lugar de porcentaje.