CSS border-radius is a single shorthand property that rounds the four corners of an element's border box, accepting up to four length or percentage values in clockwise order from top-left through bottom-left. Each value sets the radius of one corner curve, and the property accepts pixels for fixed curves that stay constant regardless of the element's size or percentages that scale with the border box dimensions. When all four corners share the same radius, the shorthand collapses to a single value, and when opposite corners match it falls back to two values, so the declaration you copy can be far shorter than the four numbers you typed. Browsers additionally normalize adjacent curves so they fit inside the box, which means a specified radius of 1000 pixels on a 200-pixel box often renders visibly smaller than that figure. Understanding those rules is what separates a declaration that looks right in isolation from one that survives contact with real padding, real borders, and every responsive breakpoint you test against.
What the CSS border-radius Property Does
The border-radius property applies to any element with a visible box, including divs, buttons, cards, images, inputs, and table cells with border-collapse: separate. Each corner curve is the intersection of an imaginary circle with the outer edge of the border box, and the radius you specify is the size of that circle. Backgrounds, borders, and any overflow clipping follow the curve, which is why the property is a foundational building block for cards, tags, and modern interface shells.
The W3C's CSS Backgrounds and Borders Level 3 defines border-radius as accepting one to four lengths or percentages separated by whitespace, with each value controlling one corner in clockwise order starting from the top-left. The MDN border-radius reference documents the same shape and notes that the shorthand sets four separate longhand properties (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius) at once. The W3C specification is the authoritative source for the exact syntax rules, while MDN offers practical examples and browser compatibility notes that pair well with the spec.
The practical implication is straightforward. When you write border-radius: 12px, every corner curves at 12 pixels. When you write border-radius: 12px 24px, the top-left and bottom-right use 12 pixels while the top-right and bottom-left use 24 pixels. That diagonal pairing is the most common source of confusion, because developers expect left-to-right reading order, but CSS uses clockwise order.
The Clockwise Corner Order and Shorthand Rules
Because the corner order is clockwise rather than row-by-row, many developers misinterpret the shorthand on first contact. The following table summarizes how the browser reads one to four values:
| Number of values | How the corners are assigned |
|---|---|
| 1 | All four corners use that radius. |
| 2 | First applies to top-left and bottom-right; second applies to top-right and bottom-left. |
| 3 | First applies to top-left, second is shared by top-right and bottom-left, third applies to bottom-right. |
| 4 | Applies in clockwise order: top-left, top-right, bottom-right, bottom-left. |
So border-radius: 8px 16px 24px 32px produces a shape with 8 pixels on the top-left, 16 pixels on the top-right, 24 pixels on the bottom-right, and 32 pixels on the bottom-left. That clockwise reading is fixed by the specification, and it is the reason visual tools that label every corner explicitly save time during design work rather than forcing you to memorize the mapping.
Pixels vs Percentages: Choosing the Right Unit
The unit you choose changes how corners behave as the element's dimensions change, so the choice matters more than the numbers themselves.
| Unit | Behavior | Typical use |
|---|---|---|
| px (pixels) | Fixed size that stays constant as the box resizes. | Cards, buttons, inputs, badges. |
| % (percent) | Calculated from the border box dimensions and scales with the box. | Pills, ovals, organic panels, responsive shapes. |
Pixels are the safest default for interface components because they keep the curve predictable. A button with border-radius: 8px looks the same on a 32-pixel-tall control and a 48-pixel-tall control, provided both have adequate horizontal padding. Percentages scale with the box, which is what you want for a pill-shaped button that keeps its rounded ends as it stretches, but it also means the curve changes shape whenever the parent layout reflows.
A useful rule of thumb: 50% on a square produces a circle, while 50% on a wide rectangle produces ellipse-like ends. That is why a tag or pill works with a single high percentage value, and why an asymmetric panel often looks best when all four percentages vary deliberately. Percentages can also exceed 100, because browsers resolve overlapping curves during normalization rather than rejecting the value outright.
How to Set Border Radius with the Visual Generator
When you want to set border radius on a specific component without editing your stylesheet repeatedly, the CSS Border Radius Generator gives you a direct visual workflow:
- Enter a radius for each corner in clockwise order.
- Choose pixels for fixed curves or percentages for size-relative curves.
- Inspect the preview at the displayed box dimensions.
- Copy the compressed declaration and test it on the real component.
The generator labels every corner explicitly, so you do not need to memorize the clockwise mappings. It applies the same shorthand value it gives you to the preview box, which means the shape you see is the shape your CSS will produce. Repeated corners are automatically compressed: four equal values become one value, alternating opposite corners become two values, and a shared top-right and bottom-left become three values. The shortest correct declaration is what you copy, so the result is easier to read while preserving exactly the corner values you selected.
If you are pairing rounded corners with a drop shadow, the same visual approach applies to box-shadow in a related box shadow walkthrough, and the two declarations usually need to ship together for the curve to read correctly against the surrounding background.
Browser Normalization and Practical Limits
Browsers proportionally reduce specified corner radii when adjacent curves would overlap inside the border box. This is standardized behavior, not a generator bug. If you set all four corners to 1000 pixels on a 200-pixel box, the rendered curve will be visibly smaller than 1000 pixels because the four circles cannot all fit at that size without intersecting. The browser resolves the overlap so the shape stays inside the border box, and the resulting radii are the largest sizes that fit without crossing. This normalization is documented in the W3C CSS Backgrounds and Borders Level 3 specification.
A few practical limits follow from the property's design and are enforced by the generator's input validation:
- Negative values are not allowed. CSS rejects them, and the generator restricts input to nonnegative numbers.
- Non-finite numbers cannot produce a valid declaration.
- Zero creates a sharp, square corner, which is the default when no border-radius is set.
- Percentages can exceed 100 because browsers resolve overlapping curves during normalization, though very large values typically render the same after that adjustment.
The generator produces a single circular radius per corner. CSS also supports elliptical corners using a slash to separate horizontal and vertical radii, for example border-radius: 24px / 12px. That advanced slash syntax is intentionally outside this focused tool, so if you need ellipse control you will write the slash form by hand after picking the circular values visually.
Verifying the Declaration in Your Real Component
Rounded corners affect more than decoration. Backgrounds and borders follow the curve, and any overflow clipping can follow an inner rounded edge. Very large radii can also reduce the clickable corner area of a button, so controls still need to meet appropriate touch-target sizes. Content can visually crowd a curve when padding is too small. After copying the declaration, test it with the element's real width, height, border, padding, focus outline, and responsive breakpoints.
A few starting points that cover most interface shapes:
- Uniform card: border-radius: 12px to 24px, scaled with the component's size.
- Pill: a large pixel value, or border-radius: 50%, provided the element has enough horizontal padding.
- Organic panel: vary all four percentages deliberately rather than matching them.
Do not rely on the rounded shape alone to communicate meaning. Keyboard focus, contrast, and target size still need to be tested on the final component, and the visual generator is a production aid rather than a replacement for that verification. Everything runs locally in the browser, so no design values are uploaded or stored, no account is needed, and no new dependency is loaded before you copy the declaration.
For a deeper look, see Box Shadow Generator API Alternative for Client-Side CSS.