Builds a CSS border-radius property by setting each corner independently, with a live preview. Fast, free, and built for simple browser-based workflows.
728 x 90 In-Content Ad
Border Radius Generator is a free online tool that builds a CSS border-radius property from each corner's own radius value, with a live preview. Round all four corners together or set each one independently, then copy the generated CSS into your stylesheet.
It is useful when you want a card or button with rounded corners on one side only -- a chat bubble, a tab, or a panel that should stay square where it meets another element -- instead of the same radius on all four corners. Switching between px, %, and rem also shows how the shape holds up at different sizes before you commit to a unit in code. A radius larger than the element can fit is scaled down proportionally by the browser, which is why a big px value on a short button produces a clean pill shape. The generated values follow the order CSS reads them in -- top-left, top-right, bottom-right, bottom-left -- so the line is easy to tweak by hand later.
Everything runs inside your browser, so the shape and colours you are testing are never sent to a server. That is enough to try dozens of corner combinations privately before deciding which one fits a design you have not published yet. Rounding clips the element's own background and border, but not what sits inside it: an image in a rounded card still pokes out at the corners unless the card also has overflow: hidden. A box shadow follows the curve automatically, and the Box Shadow Generator tool builds one to match. The corners here are circular; elliptical corners written with a slash, such as 40px / 20px, still need editing by hand.
Pick px, %, or rem from Unit.
Drag Top Left with corners linked for a symmetrical shape, or untick "Keep all four corners the same" to set each independently.
The Live Preview box updates instantly; change Preview Colour to see the shape against different fills.
Click Copy CSS. Reset returns every corner and the unit to their defaults.
Yes! All our tools are 100% free to use with no hidden costs, no registration required, and no credit card needed.
Absolutely. All tools run entirely in your browser (client-side). Your data never leaves your device and is not sent to our servers.
Yes, once the page is loaded, the tool will continue to work even if you lose internet connection since it runs in your browser.
There is no strict character limit, but very large amounts of text (100,000+ characters) may slow down your browser.
Yes! All our tools are free for both personal and commercial use.
Yes. Untick "Keep all four corners the same" and each of the four sliders moves independently, so you can round, say, just the top two corners and leave the bottom square.
px is a fixed pixel size, rem scales with the root font size so it grows with accessibility text-size settings, and % is relative to the element's own width and height -- useful for a shape that should always look circular or pill-shaped regardless of size.
When all four corners share the same value, the tool outputs the shorter single-value shorthand (e.g. border-radius: 12px;) instead of listing all four -- both are equivalent CSS, but the shorter form is cleaner to read.
Set the unit to % and every corner to 50 -- on a square element that produces a circle, and on a rectangular one it produces an ellipse or a fully rounded pill shape depending on the element's proportions.
Yes. Re-checking "Keep all four corners the same" snaps every corner to match the top-left value, so any custom per-corner values you had set are overwritten.
Percentages above 50 look identical to 50 on most shapes, so the slider caps at 50% instead of 100 to keep the control useful; px and rem keep a 0-100 range.