Free Border Radius Generator

Rounded corners are a small detail with outsized impact on how a design feels. This border radius generator lets you shape each corner of a live preview box with simple sliders, then hands you the exact CSS border-radius code to paste into your project. Whether you want soft 8px card corners, perfect pill buttons, or fully circular avatars, you will see the result before you write a line of code.

Private by design. This tool runs 100% in your browser — nothing is uploaded to any server.

How to Use the Border Radius Generator

  1. Drag the four corner sliders — top-left, top-right, bottom-right, bottom-left.
  2. Watch the live preview box reshape in real time.
  3. Check the pixel readouts on each slider for exact values.
  4. Click Copy CSS and paste the border-radius code into your stylesheet.

Features

Four independent sliders control each corner from 0 to 150px, with live pixel readouts so you always know the exact values. The preview box updates in real time, showing precisely how your radius will look. The tool outputs clean, copy-ready border-radius CSS in shorthand form that drops straight into any stylesheet.

Benefits & Use Cases

Front-end developers prototype button and card shapes without guesswork. UI designers hand off exact radius values to engineering. Bloggers and store owners round the corners of embeds and images for a friendlier look. Students learning CSS see immediately how border-radius values map to shapes.

Tips

Use very large values (like 999px) on a button to get a perfect pill shape regardless of height. Keep corner radii consistent across components — a small design-system scale like 4px, 8px, 16px keeps interfaces feeling intentional. Subtle radii (4–8px) read as professional; large radii feel playful.

Frequently Asked Questions

What does the border radius generator do?

It lets you adjust each corner of a box with sliders and generates the matching CSS border-radius code for you to copy.

Can I set different radii for each corner?

Yes. Each of the four corners has its own slider, so you can create asymmetric shapes as well as uniform ones.

How do I make a pill-shaped button with it?

Set all four sliders to a very large value like 999px — the corners become fully rounded regardless of the element height.

What CSS does the tool output?

Clean border-radius shorthand in pixels, ready to paste into your stylesheet.

Is the border radius generator free?

Yes. It is free to use with no sign-up and no limits.

Related Tools

Box Shadow Generator

Create soft, realistic CSS box shadows with sliders and copy the code. Free box shadow generator for web designers — no sign-up required.

Open tool →

CSS Button Generator

Design beautiful CSS buttons visually — colors, padding, radius, size. Free CSS button generator with copy-ready code — no sign-up needed.

Open tool →

CSS Text Shadow Generator

Create stunning CSS text shadows with sliders and copy the code. Free CSS text shadow generator for headings — no sign-up needed.

Open tool →

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually and copy the code. Free CSS gradient generator with live preview — no sign-up.

Open tool →