CSS Border Radius Generator
Design border-radius visually with per-corner sliders and a live preview. Link all corners or set each one, then copy ready-to-use CSS. Free.
About the CSS Border Radius Generator
This CSS border-radius generator lets you dial in rounded corners visually and copy the exact CSS. Drag a slider for each corner — top-left, top-right, bottom-right, bottom-left — and watch a live preview box update instantly so you can see precisely how the shape looks before touching your stylesheet.
Toggle 'link all corners' to adjust every corner together for a uniform radius, or unlink them to craft asymmetric shapes like speech bubbles, tabs and blobs. Switch the unit between pixels, rem and percent — percent radii create ellipse-style curves that scale with the element's size.
The tool writes the shorthand for you, automatically collapsing to the single-value form when all four corners match, and expanding to the four-value form when they don't. Copy the border-radius declaration with one click. Everything runs in your browser.
How to Use the CSS Border Radius Generator
- 1Choose your unit — px, rem or percent.
- 2Drag each corner's slider, or tick 'Link all corners' to move them together.
- 3Watch the live preview update as you adjust.
- 4Copy the generated border-radius CSS.
Frequently Asked Questions
What order are the four corner values in?
CSS border-radius shorthand lists corners clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. This generator follows that order, and when all four are equal it outputs the shorter single-value form automatically.
When should I use percent instead of pixels?
Percent radii are relative to the element's dimensions, so 50% turns a square into a circle and keeps a shape's curve proportional as it resizes. Pixels and rem give a fixed curve regardless of size. Use percent for pills and circles, px/rem for consistent card corners.
Can I make asymmetric or blob shapes?
Yes. Untick 'Link all corners' and set each slider independently. Mixing large and small radii on different corners produces tabs, speech bubbles and organic blob shapes. The generated shorthand captures all four values.
Does the generated CSS work in all browsers?
Yes. border-radius has been supported unprefixed in every modern browser for many years, so the output works everywhere without vendor prefixes.