How to Generate CSS Border Radius
Create CSS border-radius values visually. Adjust each corner independently, preview live, and copy production-ready CSS. Free border radius generator.
Open Border Radius Generator →Step-by-Step Guide
Set the overall radius
Use the main slider to set a uniform border-radius for all four corners. The preview box updates instantly so you can see exactly how rounded your element will look at any value.
Customize each corner
Toggle individual corner controls to set different values for top-left, top-right, bottom-right, and bottom-left. This lets you create asymmetric shapes like tabs, speech bubbles, or organic blob effects.
Fine-tune with units
Switch between px and % units. Percentage-based radius (like 50%) scales with the element size — perfect for creating circles and ellipses. Pixel values give you precise control for fixed-size elements.
Copy the CSS
Click "Copy CSS" to grab the border-radius property. The tool outputs the shortest valid syntax — a single value for uniform corners, or the full four-value shorthand for asymmetric shapes.
Try It Now — Free
No signup, no download. Runs entirely in your browser.
Open Border Radius Generator