Cluster C4: CSS & Design
CSS border radius and shapes: visual guide
Shape language has strong UX impact: it can communicate hierarchy, clickability, and brand tone. Using radius and shape systems consistently makes interfaces feel intentional instead of assembled from unrelated components.
Radius tokens over ad-hoc values
Define a small radius scale (for example 4 / 8 / 12 / 16) and map it to component roles. This avoids visual drift when different teams style cards, inputs, badges, and dialogs independently.
Triangles, notches, and directional cues
Shape primitives such as triangles and clipped corners are useful for pointers, callouts, and onboarding cues. Keep these accents small and consistent, and tie them to semantic states instead of decorative noise.
Clip-path in production
Clip-path enables expressive cards and media masks, but compatibility and maintainability matter. Reserve complex shapes for controlled surfaces and keep fallback rectangles for lower-capability environments.
Practical input/output example
Input
Component: promo card Need: soft corners + top-right notch
Output
border-radius: 16px clip-path: polygon(...) fallback: border-radius only