Card and Container Corners
Standard rounded corners for cards, containers, and panels in modern UI design.
border-radius: 20px 20px 20px 20px;
Card Corners tips
Modern UI trends: 8px (subtle), 12-16px (default), 24px+ (bold/friendly). Tailwind's rounded-xl = 12px, rounded-2xl = 16px.
Maintain consistent radius across components. Mixing 4px buttons with 24px cards creates visual dissonance β pick a scale and stick to it.
Inner elements should have smaller radius than their containers. A 16px-rounded card with 12px-rounded inputs inside feels natural.
On small components (<32px), large radius can swallow content. For pill buttons specifically, use the 9999 preset for fully rounded.
How It Works
Why use ours?
Also check outβ¦
Organic Blob Shapes
Use the elliptical X/Y syntax to create unique blo
Avatar & Profile Picture Shapes
Create the right corner style for profile pictures
Pills, Tags, and Badges
Build perfectly rounded pill buttons, tags, and ba
Asymmetric Corner Designs
Mix radii across corners to create distinctive, br