Can I set different radii for each corner?

Yes — unlock the corners using the toggle and each slider controls one corner independently.

What units does the output use?

Pixel (px) values. You can manually convert to rem or % if needed.

Sharp (0px), Slightly Rounded (4px), Rounded (12px), Very Rounded (24px), Pill (9999px), and Circle (50%).

Yes — set all corners to 9999px for a pill shape, or set to 50% on a square element for a circle.

Preview and generate CSS border-radius values with real-time feedback. Works in your browser. Free, no signup.

No sign-up Batch convert 100% free

Corners

Top Left8px

Quick presets

Box color

border-radius: 8px;

How useful is Border Radius Previewer?

Use the master slider to set all four corners at once

Or unlock individual corners and set each independently

Select a preset — circle, pill, rounded, or sharp

Copy the CSS border-radius value

Format and beautify JSON data with syntax highlighting.

Validate JSON syntax and find errors instantly.

Create beautiful CSS gradients visually and copy the code.

Pick colors from any format and convert between HEX, RGB, HSL.

Test and debug regular expressions with real-time matching.

Generate placeholder text for designs and mockups.