Written by Jane Smith · Reviewed by Alex Chen · August 2, 2026
Create custom rounded corners with individual control over each corner. Switch between uniform and per-corner modes, with px or percentage units.
The Border Radius Generator takes one corner value or four and produces the border-radius declaration that fits your element. Slide a single control to round every corner equally, or turn Uniform mode off and shape the top-left, top-right, bottom-right, and bottom-left corners on their own sliders. The preview redraws with each change and the CSS line updates beside it, ready to copy into a stylesheet or an inline style attribute.
A border-radius declaration accepts one, two, three, or four lengths, and the position of each length names a corner. One value, such as 8px, applies to all four corners at once. Two values, such as 10px 20px, assign the first to the top-left and bottom-right corners and the second to the top-right and bottom-left. Three values give the first to the top-left, the second to the top-right and bottom-left, and the third to the bottom-right. Four values run clockwise from the top-left: 10px 20px 30px 40px means top-left 10, top-right 20, bottom-right 30, and bottom-left 40. The generator writes the values in that same clockwise order, so the code it hands you renders exactly like the shape on screen.
Set Uniform mode to 8 pixels and the tool emits border-radius: 8px;, the modest corner most action buttons wear. Raise the same control to 50 and the corners bow inward until a square element becomes a full circle; at 50% the shape is the pill everyone calls a capsule. Now switch to per-corner mode and enter 10, 20, 30, and 40 in that order. The output line becomes border-radius: 10px 20px 30px 40px;, and the preview shows the smallest arc at the top-left corner stepping up to the widest at the bottom-right, matching the clockwise reading of the declaration.
A percentage radius is measured against the element's own width and height rather than a fixed distance. On a square, 50% yields a perfect circle; on a wide rectangle it produces a semicircular end, which is why the same value shapes a capsule on a button and a circle on an avatar. Values above 50% remain valid but change nothing visually, because a corner cannot curve more than halfway into its box. The number field accepts anything from 0 to 500 while the sliders span 0 to 100, so both extremes are reachable no matter which control you prefer. A zero restores a square corner, which is the starting position of every slider.
Because the element is wider than it is tall, so the same 50% radius traces an ellipse instead of a circle. Give the element equal width and height in your CSS and the ellipse closes into a round shape.
Yes. Browsers accept mixed shorthand such as border-radius: 10px 50%, and the longhand properties like border-top-left-radius each take either unit on their own. The generator sticks to one unit per session, so merge the two by hand after copying the code.
Turn Uniform mode off and move the top-left and top-right sliders while leaving the bottom pair at zero. The copied declaration keeps the lower corners square.
The curve follows the outer edge of the border box, so a thick border shows two radii, one along the outside and a tighter one along the inside. If that double curve looks wrong, thin the border or lower the radius until the pair settles.
Yes. The declaration needs no vendor prefix in any current browser, and the preview beside it shows the exact rendering before you copy it.
Rounded corners soften an interface. Buttons, badges, avatar images, and card headers all read as friendlier with a small radius, and a full pill suggests a modern, touch-friendly control. Reach for the generator when you are comparing corner sizes on a live component and want the answer in one line of CSS. The radius is the wrong tool when the shape itself is irregular: a speech bubble tail, a notched corner, or a star-shaped profile picture calls for clip-path or an SVG mask instead. The page does the rounding in your browser, and your values never leave the machine.
The generator writes one radius per corner, which is exactly what the preview draws. CSS also supports an elliptical form in which the horizontal radius and the vertical radius differ, written with a slash, such as border-radius: 10px / 30px. The pair splits each corner into two arcs, a shallow one across the width and a tall one down the height, so the shape becomes an oval instead of a circle. The tool does not emit this syntax, and that is an honest gap: if a design calls for an oval corner, copy the generated line and add the slash and the second value yourself. Most interfaces never need the elliptical form, since the simple pill and the circle cover the common cases, but knowing the syntax exists explains why some corners look stretched on other people's sites.
The numbers themselves have two guardrails. The sliders stop at 100, which is plenty for any realistic corner, while the number input accepts up to 500, a margin that matters if you paste an oversized value from another tool and want to see it honored rather than rejected. Entering a negative number or a non-numeric string is ignored by the input control, so the preview stays on the last valid value instead of breaking.