Control all 8 sub-radius values visually. Build blobs, pills, squircles and asymmetric shapes.
border-radius
shorthand accepts 1–4 values before the optional
/
and 1–4 values after it. Values before the slash define horizontal radii; values after define vertical radii. This allows elliptical corners — perfect for blobs and organic shapes.
Percentage values are relative to the element's dimensions: horizontal percentages reference width, vertical percentages reference height.
border-radius: 50%
creates a perfect circle on a square, while a rectangle becomes an ellipse. Pixel values stay fixed regardless of size.
border-radius: 999px
border-radius: 50%
30%
all corners
8px
–
16px
border-radius cheat sheet shows you circles and pills. Almost none of them explain the forward slash, which is what makes actual blob shapes possible.The full shorthand is border-radius: [h-radii] / [v-radii]. Values before the slash define horizontal radii; values after define vertical. Drop the slash and both axes get the same value — which is why most corners look circular. But corners don’t have to be circular. Add the slash and each corner becomes an ellipse, which is the only way to get proper organic blob shapes without resorting to SVG.
| Shape | Value | Honest notes |
|---|---|---|
| Circle | 50% | Only a true circle on a square element. On a 200×100 box, 50% gives an ellipse because the percentage computes against each axis independently. If the shape needs to stay circular regardless of dimensions, use an explicit 9999px instead. |
| Pill / capsule | 9999px | Better than 50% for buttons and tags. Large pixel values cap at the natural maximum per side, so you get a semicircle on each end at any aspect ratio without any ellipse weirdness. |
| Standard card | 8px | The de facto web default. Goes up to 16px for cards that want to feel more “app-like.” Beyond 24px starts looking cartoonish in most UI contexts. |
| Squircle | 30% 70% 70% 30% / 30% 30% 70% 70% | The iOS app icon shape. Not technically a squircle (that’s a superellipse and CSS can’t render one natively), but close enough that most people can’t tell the difference at glance. |
| Organic blob | 63% 37% 54% 46% / 55% 48% 52% 45% | Arbitrary asymmetric values. Drag the handles in the preview to discover shapes — sliders alone take too long. Export and then fine-tune in code. |
| No rounding | 0 | Explicit is better than absent. Some CSS resets or parent components set a default radius; writing 0 overrides them clearly. |
This trips up almost everyone at least once. border-radius rounds the painted border and background of the element. It doesn’t clip child elements that overflow it — those paint right over the rounded corners. Add overflow: hidden to the parent. If the child is an <img> and you also need object-fit, you may need overflow: hidden on a wrapper, not the img itself.
Apply border-radius to a <td> or <th> and nothing happens. The reason is border-collapse: collapse — collapsed table borders and border-radius are incompatible at the spec level. Switch to border-collapse: separate and set border-spacing: 0 to fake the look of a collapsed table while getting radius to work.
On a 400×200 element, border-radius: 50% produces a 200px horizontal radius and a 100px vertical radius — an ellipse, not a circle. This is correct per spec, but it surprises people who think percentage means "half of the shorter dimension." If you need a circle at a specific size, use explicit pixel or rem values, or ensure the element is a square.
Animating border-radius between complex asymmetric values worked unreliably in Safari before version 15.4. The browser would sometimes drop to the main thread instead of compositing the animation. If you’re targeting older iOS/macOS, test on device early. Adding will-change: transform to the element helps push it to a compositor layer, though it’s not a guarantee.
50% computes a separate radius per axis (50% of width horizontal, 50% of height vertical), so a wide rectangle becomes an oval. 9999px caps at whatever fits, which on a rectangle gives you a stadium / capsule shape with semicircular ends. For avatars and icon frames that are always square, use 50%. For buttons and tags that can be any width, use 9999px.border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use the 4-value shorthand with zeros in the other positions: border-radius: 12px 0 0 0 rounds only the top-left corner. The shorthand goes clockwise from top-left, same as margin and padding.