One value, or four, or eight
Given a single value, every corner matches. Given four, they are applied clockwise from the top left. There is also an eight-value form with a slash, which sets the horizontal and vertical radii of each corner separately — that is what makes elliptical corners possible rather than only circular ones.
The [msm_tool slug="border-radius"] exposes each corner independently and collapses the output to a single value when they all agree, which is what anyone would write by hand.
Pixels or percent
The unit changes the behaviour, not just the number.
Pixels round by a fixed amount whatever the element's size. A 12px radius looks the same on a small button and a large card, which is usually what a component wants.
Percentages are relative to the box's own dimensions, so they scale with it. That is how you make a circle — 50% on every corner of a square. On a rectangle the same value gives an ellipse, because each corner's horizontal radius is half the width and its vertical radius is half the height, and those are different numbers.
Rule of thumb: pixels for components, percentages for shapes.
Nested corners need different radii
The detail that separates a considered interface from an approximate one.
An element inside a rounded container should have a smaller radius than its container, reduced by roughly the padding between them. Give both the same radius and the two curves run parallel rather than concentric, and the gap between them visibly widens at the corner. It reads as slightly wrong to almost everyone and almost nobody can say why.
The arithmetic is: inner radius = outer radius − padding. A card with a 16px radius and 8px of padding wants an 8px radius on whatever sits inside it.
Large values are capped, proportionally
A radius greater than half the box would make the corners overlap. Rather than allowing that, the browser reduces all the radii proportionally until they fit.
Two consequences. First, a very large value on a small box simply produces the pill shape — which is why border-radius: 9999px is a common idiom for pills, since it is guaranteed to be capped to exactly half the height whatever that turns out to be. Second, if you set different radii and they all come out smaller than expected, one of them was over the limit and the cap scaled the rest with it.
It clips the background, not the layout
The element still occupies its full rectangle. Text beside it does not flow around the curve, and the corners still receive pointer events unless something else stops them.
If you need content inside to be clipped by the curve — an image filling a rounded card, for instance — the container needs overflow: hidden. Without it the image's square corners poke through the rounded ones.
Asymmetric corners
Rounding only some corners is how a great deal of interface furniture is built: tabs rounded at the top, chat bubbles with one square corner pointing at the speaker, cards that sit flush against an edge.
The four-value form does that directly. Worth remembering the order is clockwise from top-left, not the box-model order of top-right-bottom-left that margin and padding use.
When to round the file instead
Almost never, where you control the page. A CSS radius leaves the image intact, adapts to any size, and can be changed without re-exporting anything.
Rounding pixels into a file is for when the image is going somewhere you do not control — an email, a platform that will not let you style it, an export for someone else. Everywhere else, let the display do it.