The border-radius shorthand most developers get wrong
border-radius accepts 1–4 values using the same TRouBLe (top-right-bottom-left) clockwise order as margin and padding — but with a twist. The property actually sets 8 values: the horizontal and vertical radii of each corner independently. The slash syntax separates them: border-radius: 40px 10px / 20px 5px sets top-left and bottom-right corners to 40px horizontal / 20px vertical, and top-right and bottom-left to 10px horizontal / 5px vertical — producing an elliptical corners effect that's impossible with single values.
The common case — uniform rounded corners — is just one value: border-radius: 8px. Setting border-radius: 50% on a square element makes a perfect circle. On a non-square element (e.g., a wide button), 50% produces an ellipse — use border-radius: 9999px for a consistent pill shape regardless of dimensions.
Quick reference for common shapes
| Shape | CSS | Notes |
|---|---|---|
| Slightly rounded card | border-radius: 6px | Standard card in most design systems |
| Rounded card (Material) | border-radius: 12px | Material Design 3 card default |
| Pill button | border-radius: 9999px | Works at any width |
| Circle (square element) | border-radius: 50% | Element must be square |
| Top-only rounding | border-radius: 12px 12px 0 0 | Card attached to content below |
| Squircle approximation | border-radius: 30% | iOS app icon shape, close approximation |
| One corner only | border-radius: 0 0 0 16px | Bottom-left only (TRouBLe order) |