Rounded corners are one of the quietest design decisions on the web, and one of the most pervasive. Buttons, cards, images, input fields and dialog boxes almost all carry some rounding today, and visitors have learned to read it as a signal: sharp corners feel formal and technical, generous rounding feels friendly and approachable, and a consistent rounding style across a site feels considered. The effect is achieved with a single CSS property, border-radius, but the property accepts up to four values, and the order in which they apply to the corners is the detail that trips people up.
The CSS Border Radius Generator makes that order visible. You set each corner's radius, preview the rounded box, and copy the border-radius CSS for your own stylesheet. The preview matters because rounding is a visual judgement: a number on its own tells you little about how a corner will feel, while a box you can see tells you immediately whether the rounding is subtle, playful, or overdone.
How the tool works
A box has four corners: top-left, top-right, bottom-right and bottom-left. When you supply four values to border-radius, they apply in that clockwise order, starting at the top-left. So a value of "24px 8px 24px 8px" means the top-left corner has a 24-pixel radius, the top-right has 8 pixels, the bottom-right has 24 pixels, and the bottom-left has 8 pixels. The clockwise order, starting at the top, is the rule to memorise, and it is the same order used by other CSS shorthand properties that take four values.
Fewer values follow a shorthand logic. One value applies to all four corners equally. Two values apply the first to the top-left and bottom-right, and the second to the top-right and bottom-left — opposite corners pair up. Three values apply the first to the top-left, the second to the top-right and bottom-left, and the third to the bottom-right. The generator spares you from memorising these rules by letting you set each corner individually and producing the explicit four-value form, which is always unambiguous to the next person who reads your stylesheet.
The radius itself is the radius of the imaginary circle that rounds the corner. A radius of 0 produces a sharp corner. A small radius, such as 4 or 8 pixels, softens the corner slightly. A large radius, such as 24 pixels or more, produces a visibly curved corner. When the radius reaches half the height of the box, the ends become fully rounded, which is how pill-shaped buttons are made: a button 48 pixels tall with a border-radius of 24 pixels has semicircular ends.
A worked example
Suppose you are styling a card component and you want a distinctive but restrained look: generous rounding at the top-left and bottom-right, where the eye enters and leaves the card, and slight rounding at the other two corners. You set the top-left to 24 pixels, the top-right to 8 pixels, the bottom-right to 24 pixels, and the bottom-left to 8 pixels. The generated CSS is border-radius: 24px 8px 24px 8px. In the preview, the card's diagonal corners mirror each other, giving a subtle dynamic feel without looking lopsided.
Now check the result against two common errors. If you had accidentally written the values in a different order — for example, 8px 24px 8px 24px — the generous corners would sit on the opposite diagonal, and the card would look like a different design. The preview catches that immediately, because the eye notices diagonal asymmetry at once. If you had used a single value of 24 pixels for all corners, the card would look softer overall but lose the distinctive diagonal character. Neither result is wrong in itself; the point is that the preview lets you choose deliberately between them, rather than discovering the difference after the stylesheet is live.
A second worked detail: a pill button. A button 48 pixels tall needs a radius of 24 pixels — half its height — on all corners to achieve fully rounded ends. Using 12 pixels would give noticeably rounded but not pill-shaped ends, and using 48 pixels would look the same as 24 pixels, because a radius larger than half the height is capped by the browser. Knowing the half-height rule saves trial and error when you want that specific shape.
Common mistakes
The first mistake is the corner order. The clockwise order starting at the top-left is easy to state and easy to forget under pressure, especially when you are editing values quickly. When corners come out on the wrong diagonal, check the order before changing the numbers: the numbers are often right, and only their positions are wrong.
The second mistake is mixing units inconsistently. Pixels give absolute control; percentages make the radius relative to the box's dimensions, which means the same percentage produces different curves on boxes of different sizes. Mixing the two within one declaration is legal but hard to reason about. Pick one unit for a component and stay with it, unless you have a specific reason to do otherwise.
The third mistake is rounding without considering content. A heavily rounded corner can clip content near the edge of a box, particularly images or text that sits close to the border. If content disappears into a corner, reduce the radius, add padding, or apply the same radius to the inner content. The preview box shows the shape; your own content shows whether the shape fits it.
The fourth mistake is inconsistency across a site. Buttons with 4-pixel corners, cards with 16-pixel corners, and dialogs with 32-pixel corners create a visual patchwork that feels accidental. Choose two or three radii — for example, 8 pixels for small elements, 16 pixels for cards, and 24 pixels for large panels — and use them consistently. A small, documented set of radii is one of the cheapest ways to make a site look designed rather than assembled.
Honest limitations
Border-radius controls the shape of a box's corners; it does not control anything else about the box. It cannot fix poor spacing, weak contrast, or a layout that is crowded. It also interacts with other properties in ways the preview may not show: a border, an outline, or a shadow follows the rounded shape, but an absolutely positioned child element may overflow the rounded corner unless overflow is handled. Finally, the generator previews a single box. Rounding that looks right in isolation may look different in a dense grid, where many rounded boxes sit together, so test your chosen radii in the real layout before finalising them.
Closing
Remember the clockwise order from the top-left, choose radii deliberately, keep a small consistent set across your site, and verify the result with your real content inside the box. To add depth to a rounded card, try the CSS Box Shadow Generator, and to fill it with a smooth colour blend, see the CSS Gradient Generator. For cleaning up the stylesheet that holds these rules, read CSS Formatter: Clean Up Messy Stylesheets Fast.