CSS Border Radius Generator

Round corners exactly how you like: set each corner's radius on its own, see the shape update live, and copy the `border-radius` rule. Fully local to your browser.

100% free
Private & safe
Runs in your browser

This tool runs entirely in your browser and needs JavaScript enabled to work. The full guide, examples and FAQ below are available without it.

Top-left: 16px

Top-right: 16px

Bottom-right: 16px

Bottom-left: 16px

CSS

border-radius: 16px 16px 16px 16px;

Why use CSS Border Radius Generator?

CSS Border Radius Generator is a quick, no-nonsense developer utility that runs entirely client-side, so your code and data never leave your machine.

Runs instantly in your browser — nothing to install, nothing uploaded.
Completely free, with no account, no watermarks and no usage limits.
Output: CSS border-radius property
Adjust the four corner sliders.
Works on any device — desktop, tablet and phone — and is fully keyboard accessible.

How to use CSS Border Radius Generator

Adjust the four corner sliders.
Watch the shape update live.
Copy the border-radius CSS.
Paste it into your stylesheet.

Examples

A pill-shaped button.
A card with one sharp corner.

Supported formats & limits

Output: CSS border-radius property

Limitations

Uses pixel values; switch to percentages by hand for elliptical corners.

Frequently asked questions

Can I make ellipse corners?

Yes — swap the pixel values for percentages in the copied CSS for elliptical corners.

Uploaded anywhere?

No, it is computed in your browser.

Does it support a single value?

Set all four corners the same to get a single uniform radius.

Was this tool helpful?

CSS Box Shadow GeneratorCraft CSS box-shadows with offset, blur, spread, colour and inset — live preview.CSS Gradient GeneratorDesign linear and radial CSS gradients with a live preview and copy the code.CSS Glassmorphism GeneratorCreate a frosted-glass (glassmorphism) effect with blur, tint and transparency.CSS FormatterBeautify and indent minified or messy CSS.