Last updated 28 August 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.
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.