Un mismo radio en todo aplana tu web.

Cuánto pesa en las 509 webs del estudio

En el estudio de noviembre, con las 509 webs que la gente midió en el Slop Score con las mismas reglas, la señal «Las mismas esquinas redondeadas» apareció en 136, un 27 %. Lo que la vuelve útil es dónde aparece:

• En 34 de las 63 webs que sacaron 55 o más, un 54 %.
• En 26 de las 167 que sacaron menos de 15, un 16 %.
• En el corpus de calibración del Slop Score (33 webs slop y 20 cuidadas), la mediana de radios de 12 px o más, sin contar las pastillas, es del 23 % en las slop y del 2 % en las cuidadas.

El Slop Score la marca cuando la página tiene al menos ocho cajas y siete de cada diez llevan un radio de 12 px o más. En el resultado verás el porcentaje de cajas y el radio que más se repite. Si dice 16 px, es rounded-2xl; si dice 12, rounded-xl; si dice 24, rounded-3xl. Son los valores de fábrica de Tailwind 4.

Tres radios, cada uno con su trabajo

Prefiero pensar el radio como parte de la escala, igual que los tamaños de letra o los espacios de una escala propia. Tres valores alcanzan para casi cualquier página:

• Uno chico, de 4 a 6 px, para lo que se toca y es pequeño: campos, casillas, chips, el código en línea.
• Uno mediano, para las superficies: imágenes, tarjetas, paneles. Puede ser 8 o 12 px, o 0 si la marca es más dura.
• La pastilla, solo para un tipo de pieza, casi siempre los botones. Si la pastilla también está en las etiquetas, los avisos y los filtros, deja de señalar algo.

:root {
  --radio-control: 6px;     /* campos, casillas, chips */
  --radio-superficie: 12px; /* imágenes, tarjetas, paneles */
  --radio-pastilla: 999px;  /* solo botones */
}

input, select, .chip { border-radius: var(--radio-control); }
.tarjeta, img { border-radius: var(--radio-superficie); }
.btn { border-radius: var(--radio-pastilla); }

/* Las secciones y los bloques de texto no llevan radio ni caja */
section { border-radius: 0; }

La última línea importa tanto como las otras. La regla del Slop Score cuenta cajas: una sección que no necesita fondo ni borde no tiene por qué ser una tarjeta, y cada caja que sacas también baja la proporción.

La regla de las esquinas anidadas

Cuando una pieza redondeada va dentro de otra, por ejemplo una imagen dentro de una tarjeta con relleno, el radio de adentro tiene que ser más chico. Si los dos son iguales, la curva de adentro se ve más gruesa que la de afuera y el borde parece hinchado. La cuenta es simple: el radio interior es el exterior menos el relleno.

.tarjeta {
  --relleno: 8px;
  padding: var(--relleno);
  border-radius: var(--radio-superficie);
}

.tarjeta img {
  /* 12 px menos 8 px de relleno: 4 px */
  border-radius: max(0px, calc(var(--radio-superficie) - var(--relleno)));
}

Con 12 px afuera y 8 px de relleno, la imagen queda en 4 px y las dos curvas corren paralelas. Si el relleno es igual o mayor que el radio, la de adentro va en cero.

Pídeselo así a la IA

Si no lo dices, el modelo vuelve a rounded-2xl en la siguiente sección que genere. Pásale los tres valores y lo que no tiene que hacer:

Usa solo tres radios de esquina, definidos como variables CSS: --radio-control: 6px para campos, casillas y chips; --radio-superficie: 12px para imágenes, tarjetas y paneles; --radio-pastilla: 999px solo para botones. No uses rounded-xl, rounded-2xl ni rounded-3xl. Las secciones y los bloques de texto no van dentro de tarjetas ni llevan radio. Cuando una pieza redondeada esté dentro de otra con relleno, su radio es el de afuera menos el relleno.

Después vuelve a medir tu página en el Slop Score y busca si sigue apareciendo «Las mismas esquinas redondeadas». Más instrucciones como esta, listas para copiar, están en la guía de prompts.