CSS Border Radius Generator

Drag the sliders to round each corner, see a live preview, and copy the CSS. Free, no sign-up.

Share this tool

Embed this tool on your website

Free to embed on any site. The snippet keeps an optional credit link (marked nofollow) — appreciated, never required.

<iframe src="https://sgbp.tech/tools/border-radius-generator/embed" width="100%" height="460" loading="lazy"
  style="border:1px solid #e5e5e5;border-radius:12px;max-width:480px" title="Border Radius Generator by SGBP"></iframe>
<p style="font:13px system-ui;color:#666">Free <a href="https://sgbp.tech/tools/border-radius-generator" rel="nofollow">Border Radius Generator</a> by <a href="https://sgbp.tech" rel="nofollow">SGBP</a></p>

Tips for rounded corners

Use a consistent radius across buttons, cards and inputs for a cohesive look — pick one scale (e.g. 8px for inputs, 14px for cards) and stick to it. For pill-shaped buttons, set a very large radius like 999px. Asymmetric radii (different per corner) are great for speech bubbles and decorative shapes.

Frequently asked questions

What does border-radius do in CSS?

The border-radius property rounds the corners of an element. You can set one value for all corners or a different radius for each corner.

How do I use this generator?

Drag the four sliders to round each corner, watch the live preview, then copy the generated CSS straight into your stylesheet.

Can I round each corner differently?

Yes — each slider controls one corner (top-left, top-right, bottom-right, bottom-left), so you can make asymmetric shapes.

Is this tool free?

Yes, it is free, needs no sign-up, and runs entirely in your browser.