Alle Rundungen leiten sich aus --radius-base (4px) ab. Wird daraus 0, ist die ganze Website scharfkantig — in einem Schritt.
Die Stufen
| Variable | Rechnung | Einsatz |
|---|---|---|
--radius-s |
Grundwert × 0,75 | Eingabefelder, kleine Flächen |
--radius-m |
Grundwert bis × 1,5 | Karten, Kaesten |
--radius-l |
Grundwert × 2 bis × 3 | große Flächen, Bildrahmen |
--radius-xl |
Grundwert × 4 bis × 6 | Sektionen mit runden Ecken |
--radius-pill |
fest 9999px | Buttons, Badges — immer halbrund |
--radius-circle |
50 % | Profilbilder, Icon-Kreise |
Warum die mittleren Stufen mitwachsen
--radius-m bis --radius-xl sind nicht feste Werte, sondern rechnen sich aus der Bildschirmbreite. Auf einem großen Monitor ist die Rundung einer Karte stärker als auf dem Handy.
Grund: Eine Rundung von 12 px wirkt auf einer 300 px breiten Karte deutlich, auf einer 1.200 px breiten kaum. Damit der Eindruck gleich bleibt, muss der Wert mitskalieren.
Buttons sind eine Ausnahme
--radius-btn zeigt auf --radius-pill — Buttons sind also immer vollständig halbrund, unabhängig vom Grundwert. Das ist eine gestalterische Festlegung: halbrunde Buttons sind die erkennbare Form der Marke.
Soll das anders werden, zeigt --radius-btn stattdessen auf --radius-m. Ein Wert, alle Buttons.
Schatten
Schatten vergibst du über die Helfer u-sh--s, u-sh--m, u-sh--l. Sparsam einsetzen: Sie sollen Ebene zeigen („das liegt über dem Rest“), nicht dekorieren.
Eine Karte, die ohnehin einen Rahmen hat, braucht keinen Schatten dazu — beides gleichzeitig wirkt schnell schwer.
u-rad--s, --m oder --l.