CSS Border Radius Generator — Visual Builder
Tweak border-radius for each corner with sliders, see live preview, copy ready CSS.
border-radius: 20px;You're on 7BusyBoss — 300+ free tools that run instantly in your browser. No signup, nothing uploaded.
Rounded corners, dialed in
Drag the corner controls and copy the exact border-radius CSS — round all four corners evenly or each one independently.
Quick shapes
- Circle —
50%on a square element. - Pill button — a large value like
9999px. - Soft card —
8–16pxfor a friendly, modern look.
Copy-paste ready and free for any project.
How to use the CSS Border Radius Generator
Takes about a minute. No signup, no download, your data stays in your browser.
- 1Open the tool. Scroll up to the CSS Border Radius Generator above — it loads instantly in your browser, no install needed.
- 2Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
- 3Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.
Frequently asked questions
Common questions about the CSS Border Radius Generator.
How do I create rounded corners in CSS?
Drag the corner sliders to taste and copy the generated `border-radius` value into your CSS.
How do I round only some corners?
Set each corner independently — for example round just the top two.
How do I make a circle or pill shape?
Use 50% on a square for a circle, or a large value like 9999px for a pill button.
Is the generated CSS free to use?
Yes — copy and paste it into any project.
Community rating
Discussion (0)
No comments yet. Start the discussion.
Keep exploring
Related tools across 7BusyBoss — all free, all instant.