UI/UX bytheo
Toutes les notions

Border radius imbriqués

Le rayon intérieur se déduit du rayon extérieur, il ne se copie pas.

✗ Même rayon des deux côtés

L’écart entre les deux bords se creuse dans le coin au lieu de rester constant : le coin intérieur paraît trop rond.

✓ Rayon intérieur réduit

L’écart reste constant tout au long du coin : les deux courbes sont parallèles.

La règle

rayon intérieur = rayon extérieur − écart

La limite

La règle ne vaut que si l’écart est plus petit que le rayon extérieur. Au-delà, la formule tombe à zéro : le coin intérieur est trop loin de la courbe extérieure pour jurer avec elle, et son rayon redevient libre.

Où l’appliquer

Partout où deux arrondis se touchent : un bouton dans une carte, une image dans une vignette, un champ dans une barre de recherche, une pièce jointe dans une bulle de message, une carte dans une modale. Dès que l’œil voit deux courbes proches, il compare leur écart et remarque immédiatement quand il n’est pas constant.

bouton dans une carte40px − 20px = 20px
image dans une vignette40px − 20px = 20px
champ dans une barre de recherche44px − 12px = 32px