CSS Border Radius Generator

01 Shorthand Value Mapping

02 Common Shape Archetypes

• 💊
  The 9999px Pattern Using an oversized pixel value ensures a perfect "pill" shape regardless of the element's height, as browsers collapse overlapping radii.
• 🍎
  Squircle Approximation Replicate the iOS app icon feel using elliptical radii (e.g., 30% / 50%) for a smoother, continuous curvature transition.
• 🍃
  Asymmetry Zero-width corners paired with full-width opposite corners create organic, hand-drawn effects perfect for modern landing pages.

03 Border Radius in the Wild

Radius is the most under-appreciated token in a design system. The same component with 4px corners reads as enterprise SaaS; at 16px it reads as consumer; at 9999px it becomes a pill. Here is where radius decisions actually live.

• 🃏
  Card Corners (4-16px) Cards in Linear use 8px, Notion uses 6px, Stripe uses 12px. The whole product feels different at each value. Pick once at the system level and apply it everywhere, including nested elements (a 4px inner radius inside a 12px card looks structurally honest).
• 💊
  Pill Buttons via 9999px Per CSS Backgrounds 3 §5.5, when corner radii would overlap, browsers scale them all down proportionally to fit. border-radius: 9999px always collapses to "fully round on the short axis", pill on a tall button, circle on a square. Used everywhere because it is shape-independent.
• 🍎
  iOS-Style Squircle Approximation Apple's app icons use a superellipse (x^n + y^n = r^n) for "continuous curvature", the corner blends into the side smoothly. CSS only offers quadratic Béziers. The closest approximation is elliptical radii like 30% / 50%; for pixel-perfect squircles, fall through to clip-path: path() or SVG.
• 👤
  Circular Avatars from a Rectangle A profile image with border-radius: 50% only renders as a circle if the element is square. On a rectangle, 50% gives an ellipse. Use aspect-ratio: 1 alongside border-radius: 50% to enforce squareness without setting fixed dimensions.
• 🎯
  Focus Rings That Follow the Curve A rounded button with a rectangular outline looks broken. Either use box-shadow: 0 0 0 3px ... for the focus ring (it inherits border-radius) or set outline-offset and let modern browsers' outline follow the radius (Chrome 94+, Safari 16.4+).

04 Worked Examples

border-radius: 50% 25% / 25% 50%;
/* The "/" splits horizontal radii from vertical radii.
   TL/TR/BR/BL horizontal: 50% 25% 50% 25%
   TL/TR/BR/BL vertical:   25% 50% 25% 50% /

border-radius: 0 100% 0 100%;
/ Top-left and bottom-right pin; top-right and bottom-left round out. /

border-radius: 22%;
/ Distinguishable "kink" where the curve meets the straight side. /

/ Until CSS adopts corner-shape: superellipse(...) (Working Group draft),
   the workaround is clip-path with a hand-tuned path: /
clip-path: path("M 100,0 ... continuous-curvature path data ...");

.avatar { width: 200px; height: 100px; border-radius: 50%; }
/ Result: ellipse, flattened circle. /

.avatar { width: 200px; aspect-ratio: 1; border-radius: 50%; }
/ aspect-ratio: 1 sets height = width automatically.
   Now 50% is a circle, regardless of width. */

05 Related Tools

Radius rarely ships alone. Cards have shadows that should match the curve; buttons have focus rings that follow the radius; blob shapes pair with clip-path. These adjacent tools form the full surface-treatment kit.