📖 What is Border Radius Generator?
Border Radius Generator lets you create CSS border-radius values visually by adjusting corner radii with sliders or inputs. See the shape update live and copy the CSS. Supports uniform corners, individual corners, and elliptical (asymmetric) radii for organic shapes. Everything runs in your browser.
💡 Example
Input
Top-left: 20px, Top-right: 20px, Bottom-right: 0, Bottom-left: 0
Output
border-radius: 20px 20px 0 0;
🛠️ Common Use Cases
- Creating rounded buttons and cards for UI designs
- Building pill-shaped tags and badges
- Making circular avatars and profile images
- Designing organic blob shapes with asymmetric radii
- Generating browser-compatible border-radius CSS
📝 Border Radius Syntax
border-radius: 10px — all four corners equalborder-radius: 10px 20px — top-left/bottom-right, top-right/bottom-leftborder-radius: 10px 20px 30px 40px — top-left, top-right, bottom-right, bottom-left (clockwise)border-radius: 50% — circle (on a square element)border-radius: 10px / 20px — horizontal / vertical radii (elliptical)
⚠️ Common Mistakes
- 50% on rectangles — on non-square elements, 50% creates an ellipse, not a circle. Use equal width and height for circles.
- Overflow not hidden — border-radius clips the element, but child content may overflow. Add
overflow: hidden. - Border not rounding — borders follow border-radius automatically, but outline does not.
❓ Frequently Asked Questions
How do I make a perfect circle? ▾
Set border-radius: 50% on an element with equal width and height.
Does border-radius work with images? ▾
Yes — apply border-radius directly to the img element, or to a container with overflow: hidden.
Can I set different radii for each corner? ▾
Yes — use the four-value syntax: border-radius: top-left top-right bottom-right bottom-left.
Is my data private? ▾
Yes — all processing runs entirely in your browser. Your data is never sent to any server.
Is this tool free? ▾
Completely free — no login, no usage limits, works offline once loaded.
Yes — completely free, no login required, no usage limits.
Is my data private? ▾
Yes — all processing runs in your browser. Your data is never sent to any server.
Does it work offline? ▾
Yes — once the page is loaded, the tool works without an internet connection.