Avatar & Profile Picture Shapes
Create the right corner style for profile pictures: circular, squircle, or rounded square.
border-radius: 20px 20px 20px 20px;
Avatars tips
Fully circular: use 50% radius (or 9999px on a square element). Most platforms use this for user avatars.
iOS-style "squircle" avatars use ~22% radius (about 28px on a 128px square). Softer than a perfect circle, more interesting than a basic rounded square.
Brand logos sometimes use 20% radius for app-icon style. Apple's iOS uses an apple-specific superellipse, but 22% gets close in CSS.
For animated transitions (square β circle), animate border-radius from 8px to 50%. Looks cleaner than a hard switch.
Sut Mae'n Gweithio
Pam defnyddio ein un ni?
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
Pills, Tags, and Badges
Build perfectly rounded pill buttons, tags, and ba
Asymmetric Corner Designs
Mix radii across corners to create distinctive, br