Échelles de rayon de bordure

Une vignette arrondie s’insère au ras d’une carte arrondie. Les deux angles utilisent la même valeur — 16px, tout droit tirée de la charte graphique — et le résultat paraît malgré tout subtilement faux : l’espace entre le bord de la vignette et le bord de la carte reste régulier le long des côtés, puis s’élargit visiblement à chaque angle. Les designers ajustent le padding, changent l’image, accusent l’ombre. Chaque valeur prise isolément est « correcte », si bien que personne ne sait dire ce qui cloche.

Une échelle de rayon de bordure règle cela comme une échelle d’espacement règle les écarts : un menu court et fixe de valeurs d’angle — souvent quatre paliers plus une pilule, par exemple 0, 4, 8, 16 et 9999px — dans lequel chaque composant puise, livré sous forme de design tokens. Elle s’accompagne de la règle que la plupart des guides oublient : le rayon d’un angle imbriqué est égal au rayon extérieur moins l’écart entre les bords — 16 − 8 = 8 — ce qui est précisément ce qui réconcilie la carte ci-dessus.

Les rayons méritent la même systématisation que le reste du système d’espacement, et la récompensent vite, car un angle erroné se repère plus facilement qu’un écart erroné — comme le montre la scène d’ouverture.

Pourquoi les angles arrondis imbriqués paraissent-ils faux ?

De la géométrie pure. Dessinez deux rectangles arrondis, l’un dans l’autre, avec un écart uniforme de 8px le long des bords droits. Pour que cet écart reste de 8px autour de l’angle, les deux arcs doivent être concentriques — tracés depuis le même point central — et des arcs concentriques diffèrent en rayon exactement de la distance qui les sépare. Si l’angle extérieur fait 16px, l’angle intérieur doit faire 16 − 8 = 8px.

Donnez plutôt 16px à l’angle intérieur — le réflexe du « même token partout » — et son arc est tracé depuis un autre centre. L’écart mesure toujours 8px le long des côtés droits, mais en travers de la diagonale de l’angle il s’ouvre à environ 11,3px (8 × √2), soit à peu près 40 % de plus. C’est cette bande qui s’élargit que l’œil capte : on perçoit un espacement inégal entre deux bords parallèles bien avant de pouvoir le nommer. L’angle paraît simplement faux, et il continue de paraître faux jusqu’à ce que les rayons deviennent concentriques.

Quelle est la règle des rayons imbriqués ?

Rayon intérieur = rayon extérieur − écart. Elle se généralise à toute imbrication :

Deux conséquences. Les valeurs dérivées comme 12 ou 15 n’ont pas besoin de figurer au menu des rayons — le menu régit les angles autonomes, tandis que les angles imbriqués s’en déduisent par le calcul. Et lorsque l’écart égale ou dépasse le rayon extérieur, l’angle intérieur devient carré : correct lui aussi, aussi contre-intuitif que cela paraisse lors d’une revue de design.

En CSS, la règle tient dans un calc() d’une seule ligne :

.card {
  border-radius: 16px;               /* --radius-lg */
  padding: 8px;                      /* --space-1  */
}
.card > .thumbnail {
  border-radius: calc(16px - 8px);   /* intérieur = extérieur − écart */
  /* avec les tokens : calc(var(--radius-lg) - var(--space-1)) */
}

border-radius accepte aussi des propriétés détaillées par angle et une syntaxe elliptique — rarement nécessaires, mais bonnes à connaître quand un design réclame un seul angle aplati.

Combien de valeurs de rayon un système nécessite-t-il ?

Moins que l’espacement n’en demande : quatre paliers plus une pilule couvrent bien des produits. Un menu qui fonctionne : aucun (0), petit (4), moyen (8), grand (16) et complet (9999px — toute valeur supérieure à la moitié de la hauteur de l’élément produit une pilule, il suffit donc que le nombre soit assez énorme pour être sûr).

Plutôt que d’inventer ces nombres, empruntez le bas de l’ échelle d’espacement. Avec une base de 16px, un ratio de 2 et deux notes par doublement, les plus petits paliers du menu d’espacement sont 8, 11 et 16 — et diviser le plus petit par le ratio prolonge la même arithmétique d’un cran vers le bas : 8 ÷ 2 = 4. Un menu de rayons de 0, 4, 8, 16 et complet reste sur la formule de l’échelle, avec 11 en réserve si un angle intermédiaire finit par mériter un rôle. Garder les deux menus sur une seule formule maintient les angles et les écarts visuellement liés — et signifie qu’ils sont livrés ensemble : l’export Tailwind v4 @theme du Scale Composer embarque les rayons aux côtés des tokens d’espacement, des niveaux typographiques, des couleurs et des points de rupture, tout comme les exports DTCG et Figma Variables.

Ouvrez dans le Scale Composer l’échelle à laquelle le menu des rayons emprunte — la plage utile des rayons est le bas du même menu d’où proviennent les paliers d’espacement.

Que dit le rayon d’angle sur une marque ?

Le rayon est l’un des signaux de ton les plus rapides dont dispose une interface. Des rayons nets et petits (0–4px) tendent à se lire comme techniques, précis, sérieux — l’allure des outils de développement et des tableaux de bord financiers. Des rayons moyens (autour de 8px) se lisent comme neutres ; des grands rayons (16px et plus) comme amicaux et accessibles ; des pilules pleines comme décontractées et grand public. Aucune de ces lectures n’est une loi — le contexte les infléchit — mais la tendance est assez constante pour que le choix relève du niveau de la marque : décidé une fois, encodé dans l’échelle, appliqué partout.

Ce qui érode le signal, c’est de le décider composant par composant. Chaque nouvel écran tranche la question de l’angle un peu différemment, et le produit dérive vers un mélange de net et de doux qui ne dit plus rien du tout — le même mode d’échec, angle pour angle, qu’un espacement non systématisé.

Faites le calcul sur vos propres angles

Choisissez la paire la plus imbriquée sur votre écran le plus chargé — image dans une carte, carte dans un panneau, bouton au ras du padding d’un conteneur. Notez le rayon extérieur et l’écart entre les bords, soustrayez, puis comparez le résultat à ce qui est réellement livré : si l’angle intérieur est plus grand que la différence, vous avez trouvé la bande qui s’élargit de la scène d’ouverture. Voyez ensuite comment la paire se projette sur les paliers de l’échelle — ouvrez le calcul des rayons imbriqués dans le Scale Composer.