Escalas de radio de borde

Una miniatura redondeada se asienta a ras dentro de una tarjeta redondeada. Ambas esquinas usan el mismo valor —16px, directo de la guía de estilo— y aun así el resultado se ve sutilmente mal: el espacio entre el borde de la miniatura y el borde de la tarjeta es uniforme a lo largo de los lados y luego se ensancha visiblemente en cada esquina. Los diseñadores ajustan el relleno, cambian la imagen, culpan a la sombra. Cada valor individual es «correcto», así que nadie sabe decir qué está mal.

Una escala de radio de borde resuelve esto igual que una escala de espaciado resuelve los huecos: un menú corto y fijo de valores de esquina —normalmente cuatro pasos más una píldora, como 0, 4, 8, 16 y 9999px— del que se sirve cada componente, distribuido como tokens. Viene con la regla que la mayoría de las guías omite: el radio de una esquina anidada es igual al radio exterior menos el hueco entre los bordes —16 − 8 = 8—, que es exactamente lo que arregla la tarjeta de arriba.

Los radios recompensan la misma sistematización que el resto del sistema de espaciado, y la recompensan rápido, porque una esquina equivocada es más fácil de detectar que un hueco equivocado —como muestra la escena inicial.

¿Por qué se ven mal las esquinas redondeadas anidadas?

Geometría pura. Dibuja dos rectángulos redondeados, uno dentro del otro, con un hueco uniforme de 8px a lo largo de los bordes rectos. Para que ese hueco se mantenga en 8px alrededor de la esquina, los dos arcos deben ser concéntricos —trazados desde el mismo punto central— y los arcos concéntricos difieren en radio exactamente en la distancia entre ellos. Si la esquina exterior es de 16px, la esquina interior debe ser 16 − 8 = 8px.

Dale a la esquina interior 16px en su lugar —el instinto del «mismo token en todas partes»— y su arco se traza desde un centro distinto. El hueco sigue midiendo 8px a lo largo de los tramos rectos, pero a lo ancho de la diagonal de la esquina se abre hasta unos 11,3px (8 × √2), aproximadamente un 40% más ancho. Esa banda que se ensancha es lo que capta el ojo: la gente registra un espaciado desigual entre dos bordes que corren en paralelo mucho antes de poder nombrarlo. La esquina simplemente se ve mal, y sigue viéndose mal hasta que los radios se vuelven concéntricos.

¿Cuál es la regla para los radios anidados?

Radio interior = radio exterior − hueco. Se generaliza a cualquier anidamiento:

De aquí se siguen dos cosas. Los valores derivados como 12 o 15 no necesitan figurar en el menú de radios —el menú gobierna las esquinas independientes, mientras que las esquinas anidadas se calculan a partir de ellas. Y cuando el hueco iguala o supera al radio exterior, la esquina interior se vuelve cuadrada: también correcto, por muy contraintuitivo que parezca en una revisión de diseño.

En CSS la regla es un calc() de una sola línea:

.card {
  border-radius: 16px;               /* --radius-lg */
  padding: 8px;                      /* --space-1  */
}
.card > .thumbnail {
  border-radius: calc(16px - 8px);   /* interior = exterior − hueco */
  /* con tokens: calc(var(--radius-lg) - var(--space-1)) */
}

border-radius también admite propiedades individuales por esquina y una sintaxis elíptica —rara vez necesarias, pero útil conocerlas cuando un diseño pide una sola esquina achatada.

¿Cuántos valores de radio necesita un sistema?

Menos de los que necesita el espaciado: cuatro pasos más una píldora cubren muchos productos. Un menú viable es ninguno (0), pequeño (4), mediano (8), grande (16) y completo (9999px —cualquier valor que supere la mitad de la altura del elemento produce una píldora, así que el número solo necesita ser holgadamente enorme).

En lugar de inventar esos números, toma prestado el extremo pequeño de la escala de espaciado. Con una base de 16px, ratio 2 y dos notas por cada duplicación, los pasos más pequeños del menú de espaciado son 8, 11 y 16 —y dividir el más pequeño entre el ratio extiende la misma aritmética un paso más abajo: 8 ÷ 2 = 4. Un menú de radios de 0, 4, 8, 16 y completo se mantiene en la fórmula de la escala, con 11 en reserva por si una esquina intermedia llega a ganarse un papel. Mantener ambos menús sobre una sola fórmula mantiene esquinas y huecos visualmente relacionados —y significa que se distribuyen juntos: la exportación Tailwind v4 @theme de Scale Composer incluye los radios junto a los tokens de espaciado, los niveles tipográficos, los colores y los breakpoints, igual que las exportaciones DTCG y Figma Variables.

Abre en Scale Composer la escala de la que el menú de radios toma prestado — el rango útil para los radios es la parte baja del mismo menú del que provienen los pasos de espaciado.

¿Qué dice el radio de esquina sobre una marca?

El radio es una de las señales de tono más rápidas que tiene una interfaz. Los radios pequeños y marcados (0–4px) suelen leerse como técnicos, precisos, serios —el aspecto de las herramientas de desarrollo y los paneles financieros. Los radios medios (alrededor de 8px) se leen como neutros; los radios grandes (16px en adelante) como amistosos y cercanos; las píldoras completas como informales y de consumo. Ninguna de estas lecturas es una ley —el contexto las desplaza— pero la tendencia es lo bastante consistente como para que la elección corresponda al nivel de marca: se decide una vez, se codifica en la escala, se aplica en todas partes.

Lo que erosiona la señal es decidirla componente por componente. Cada pantalla nueva resuelve la cuestión de la esquina de forma ligeramente distinta, y el producto deriva hacia una mezcla de marcado y suave que no dice nada en absoluto —el mismo modo de fallo, esquina por esquina, que el espaciado sin sistematizar.

Haz los cálculos en tus propias esquinas

Elige el par más anidado de tu pantalla más cargada —imagen dentro de tarjeta, tarjeta dentro de panel, botón a ras contra el relleno de un contenedor. Anota el radio exterior y el hueco entre los bordes, resta, y compara el resultado con lo que realmente se ha distribuido: si la esquina interior es mayor que la diferencia, has encontrado la banda que se ensancha de la escena inicial. Luego observa cómo se asigna el par a los pasos de la escala — abre los cálculos de radio anidado en Scale Composer.