Cluster C4: CSS und Design
Visueller Leitfaden zu CSS Border Radius und Formen
Radius und Formen beeinflussen Hierarchie, Klickbarkeit und Markenton direkt. Ein kleines System ist belastbarer als spontane Einzelwerte.
Radiuswerte als Token definieren
Wenn Karten, Inputs, Buttons und Dialoge unterschiedliche Eckradien haben, verliert die Oberfläche schnell ihre visuelle Ordnung.
Eine kleine Radius-Skala mit festen Rollen erleichtert Konsistenz und Review gleichermaßen.
Formen nur mit semantischem Zweck einsetzen
- Dreiecke, Kerben und Clip-Path-Flächen eignen sich für Hinweise und Richtungsakzente.
- Komplexe Clip-Paths nur auf kontrollierten Flächen nutzen und Rechteck-Fallbacks behalten.
- Form, Hintergrund und Ecken als zusammengehörige visuelle Sprache behandeln.
Praktisches Ein-/Ausgabe-Beispiel
Eingabe
Komponente: Promo-Karte Bedarf: weiche 16px-Ecken + Kerbe oben rechts
Ausgabe
border-radius: 16px clip-path: polygon(...) Fallback in schwächeren Umgebungen: nur Radius