Asymmetric Corner Designs
Mix radii across corners to create distinctive, brand-recognizable card and button shapes.
border-radius: 20px 20px 20px 20px;
Asymmetric tips
Disable "Unified" to get independent corner control. A common pattern: large radius on opposite corners (TL + BR), small on the others.
For chat bubbles: round all corners except one (the "tail" corner). Speaker bubbles have BR rounded down to 4px; receiver bubbles have BL.
Asymmetric corners can signal directionality — e.g., a card that "points" toward a target by having only one sharp corner.
Be intentional. Random asymmetry looks like a mistake; deliberate asymmetry reinforces brand voice. Document the recipe in your design system.
So funktioniert es
Warum unseres?
Also check out…
Organic Blob Shapes
Use the elliptical X/Y syntax to create unique blo
Card and Container Corners
Standard rounded corners for cards, containers, an
Avatar & Profile Picture Shapes
Create the right corner style for profile pictures
Pills, Tags, and Badges
Build perfectly rounded pill buttons, tags, and ba