RizCraft Logo RizCraft

CSS Border Radius Generator

Round each corner independently, link them for the simple case, and copy production-ready CSS instantly.

Link all corners
20px
20px
20px
20px
Presets
CSS Output

Similar CSS Tools

See All
Color Shades Generator
Generate tints, shades, and saturation variations from any base color
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview
Color Converter
Convert colors between HEX, RGB, and HSL formats instantly
Browser extension

Keep RizCraft tools one click away

Open 24 built-in tools from your browser sidebar, use quick actions from the right-click menu, and reach every RizCraft tool without hunting through tabs.

Add to Chrome Explore the extension

Firefox and Edge versions are coming next. Free to install

Free CSS Border Radius Generator

Round the four corners of any element independently — drag each slider to set the top-left, top-right, bottom-right, and bottom-left radius, or keep Link all corners on for the common case where every corner matches. Try the pill preset for a fully rounded button, or the blob preset for an organic, asymmetric shape.

The generated border-radius CSS is supported unprefixed in every modern browser and works on any block-level element.

Frequently Asked Questions

How do I make a perfect circle or pill shape?
Set every corner to a value at least half of the element's smaller dimension (our Pill preset uses 9999px, which clamps to a perfect capsule on any size box). For a circle, the element also needs equal width and height.
What happens when Link all corners is off?
Each of the four sliders controls its own corner independently, so you can build asymmetric shapes like the Blob and Diagonal presets.
Is this tool free?
Yes, completely free with no signup, running entirely in your browser.