Styling & CSS · Visual design
Border Radius
Also called: border-radius, Rounded corners, Corner radius
A CSS effect that turns an element's square corners into curves. Bigger values mean rounder corners, and it's one of the key things that makes an interface feel sharp or soft.
In detail
border-radius sets the curve radius of the four corners. 0 is a square corner, which feels serious and sharp. 4–8px is a common choice for admin and tool products. 12–16px feels soft and friendly, and is common in mobile and consumer products. 9999px gives a pill button that's fully round on both ends, and 50% turns a square avatar into a perfect circle.
Consistency matters. Prepare two or three radius sizes for the whole site (say, small 4px, medium 8px, large 16px), and give buttons, inputs, and cards one size each. When nesting, the outer radius should be larger than the inner one, roughly the inner radius plus the padding between them, so it looks right.
When you put an image inside a rounded container, add overflow: hidden to the container, or the image's square corners will poke out.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-border-radius- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026