Border radius.

One value, four values, eight values — all valid CSS.

CSS border-radius accepts up to eight values, and the order is the kind of thing that causes 4am mistakes. The short version: 1 value applies to all four corners; 2 values are top-left+bottom-right then top-right+bottom-left; 4 values go clockwise from top-left. Beyond four, the syntax splits into x and y radii separated by /, giving you elliptical corners.

border-radius: 16px;
/* equivalent to */
border-radius: 16px 16px 16px 16px;

border-radius: 16px 4px;
/* TL & BR = 16px, TR & BL = 4px */

border-radius: 50% 25% 50% 25% / 25% 50% 25% 50%;
/* x-radii / y-radii — elliptical corners */

The tool above keeps the four-value form because it's the readable one. The slash-separated elliptical form is rare in production except for one trick: border-radius: 50% on a square gives a circle, on a rectangle gives an ellipse. The latter is how "pill" buttons get their shape.

Choose the unit by what should scale.

A 16px corner on a 320×200 button looks different from a 16px corner on a 64×40 chip. Three rules of thumb:

• Use px when the corner radius should look the same regardless of the element's size — most cards, buttons, modals.
• Use % when the corner should scale with the element. border-radius: 50% turns any square into a circle, any rectangle into an ellipse.
• Use rem when the corner should scale with text size — useful for pills containing text where the corner radius should track font growth.

A common newbie mistake: using border-radius: 50% on a button to make it "pill-shaped". On a typical button (~120×40) this gives an ellipse, not a pill. The pill shape comes from a large enough px or rem value: border-radius: 9999px or rounded-full in Tailwind. The browser caps the radius at half the smaller dimension, so 9999 effectively means "max possible".

Apple-style corners are not just bigger radii.

If you've ever felt that an iOS icon's corner looks "softer" than the same radius in CSS, you're not imagining it. iOS, macOS, and modern Material Design use a superellipse shape — a continuous-curvature corner where the transition from straight edge to curved corner is gradual instead of sudden. CSS's border-radius draws a circular arc, which has a discontinuous second derivative at the inflection point.

For a true squircle in CSS today, you have two options. SVG with a path that traces the squircle math (cubic Bezier approximations are good enough). Or the experimental corner-shape CSS property in CSS Backgrounds Level 4, which lets you specify round, bevel, scoop, or notch per corner — but it's not yet in any shipping browser.

For most engineers, the simplest practical workaround is to use a slightly larger radius (32px instead of 16px) on important surfaces — eye perceives "softer corner" as part of polish. Squircles are nice, the perception gap is real, but it's small.

Three production gotchas.

• Background image clipping. If a child element extends past the rounded parent's edge, it will not automatically clip to the parent's radius unless the parent has overflow: hidden. The most common bug: an absolutely-positioned ribbon poking out of a "card."
• Box-shadow alignment. A box-shadow on a rounded element follows the radius automatically. But an inset shadow doesn't — the shadow's shape matches the box outline, which on a rounded box is the rounded shape, but it does not bleed beyond the radius.
• Radius and outlines. CSS outline ignores border-radius — it draws a sharp rectangle. CSS outline-offset: -2px with a small radius can look correct accidentally; with a large one, the outline cuts through the curve. For "border that follows radius," use border, not outline.