Last updated 3 September 2026
Four corners, eight numbers
Most people use border-radius as a single value and never look further, but the property accepts up to eight. The first four set each corner clockwise from the top left; add a slash and four more and you are setting horizontal and vertical radii separately, which turns each corner from a quarter-circle into a quarter-ellipse. That is what produces the softer, slightly squarish curve people describe as a squircle — an effect that otherwise needs an SVG or a clip-path. Percentages behave differently from pixels here too: a percentage radius scales with the element, so the same value stays proportional as the box grows, while a pixel radius stays literal and looks progressively tighter on larger elements.
Related guide: How to build a brand colour palette that works
The eight-value form
Most people know border-radius as one number applied to all four corners, but the property takes up to eight values. Written with a slash, the numbers before it set the horizontal radius of each corner and the numbers after set the vertical radius — so border-radius: 50px 20px 40px 10px / 20px 50px 10px 40px gives four corners that are each elliptical rather than circular.
That is what produces the soft organic blob shapes used in modern illustration and hero sections. It is a single CSS property, no SVG and no image, which means it scales perfectly and animates smoothly. Transitioning between two eight-value radius sets is one of the cheapest ways to get a shape morphing effect.
Percentages, and matching radii in nested elements
A percentage radius is relative to the element's own dimensions, so border-radius: 50% turns any square into a circle and any rectangle into an ellipse. A pixel value stays fixed regardless of size. For buttons that may hold varying text lengths, a very large pixel value such as 9999px produces a reliable pill shape at any width, since the browser caps the radius at half the shorter side.
One detail designers notice and cannot always name: when a rounded element sits inside another rounded element with padding between them, using the same radius on both looks subtly wrong. The correct inner radius is the outer radius minus the padding. An outer card with 16px corners and 8px of padding wants an 8px inner radius, which makes the two curves concentric rather than merely similar.
Common questions
What does the slash in border-radius mean?
It separates horizontal radii from vertical ones. Everything before the slash sets the horizontal radius of each corner, everything after sets the vertical — giving elliptical corners rather than circular ones.
Should I use pixels or percentages?
Pixels keep the curve literal at any size, which is usually what you want for buttons and cards. Percentages scale with the element, which is useful for shapes that must stay proportional — 50% on a square makes a circle.
What order are the four corners in?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. The same order CSS uses for margin and padding shorthand.
Does this work in every browser?
Yes. border-radius, including the elliptical slash syntax, has been supported everywhere for well over a decade.
How do I make an organic blob shape?
Use the eight-value form with a slash. The values before the slash set horizontal radii and those after set vertical radii, producing elliptical corners rather than circular ones. It is pure CSS, so it scales cleanly and can be animated between two sets of values.
How do I make a pill-shaped button?
Set a radius far larger than the button will ever need — 999px is the usual trick. The browser caps the radius at half the shorter side, so the ends stay perfectly semicircular however much text the button holds. A percentage works on a fixed square but distorts as the button gets wider.
Why do my nested rounded corners look wrong?
Because the inner radius should be the outer radius minus the padding between them, not the same value. A card with 16px corners and 8px of padding needs an 8px inner radius for the two curves to be properly concentric.