CSS Border Radius Generator
Build custom border radius for any element.
Generated CSS
.box {
border-radius: 20px 20px 20px 20px;
}Generate CSS Border Radius
The border-radius property rounds the corners of an element. This generator gives you independent control of all four corners with a live preview, then copies the exact CSS â from gentle rounding to pill shapes and organic blobs.
How it works
- Each corner can have its own radius
- The shorthand order is top-left, top-right, bottom-right, bottom-left
- Equal values on all corners give a uniform radius
- Large values create circles and pills
Pixels vs. percent
Pixel radii stay fixed; percentage radii scale with the element. A border-radius of 50% on a square makes a perfect circle.
Private & Processed Locally
The CSS is generated in your browser; nothing is uploaded.
Frequently Asked Questions
Common questions about the CSS Border Radius Generator.
Can I round each corner differently?
Yes, set an independent radius for each of the four corners.
What order is the shorthand?
Top-left, top-right, bottom-right, then bottom-left.
Is it private?
Yes, the CSS is generated in your browser.