Is the Border Radius Generator free?

Yes — the Border Radius Generator is completely free, with no account, subscription, signup, or usage limits.

Is my data uploaded or stored?

No. The Border Radius Generator processes everything locally in your browser. Your input is never uploaded, saved, or shared with any server.

Does the Border Radius Generator work offline?

Yes. Once the page has finished loading, the Border Radius Generator works without an internet connection.

Which browsers does the Border Radius Generator work in?

The Border Radius Generator works in all modern browsers, including Chrome, Firefox, Safari, and Edge — no plugins or extensions needed.

How do I make a perfect circle with CSS?

Set all four corners to 50% with the unit set to %. This produces a full circle when applied to an element with equal width and height.

What creates a pill/capsule shape?

Set all corners to a large px value (e.g. 9999px) or 50%. For rectangular elements, large px values create the classic pill / capsule button shape.

Border Radius Generator

Create custom CSS border-radius shapes visually and get the code.

Link all corners

All corners 12px

CSS

border-radius: 12px;

Free browser-based tool · Runs 100% on your device · Last updated July 7, 2026

What is the Border Radius Generator?

The free CSS Border Radius Generator gives you visual control over all four corners of a CSS border-radius: Top-left, Top-right, Bottom-left, and Bottom-right. A linked mode keeps all corners equal with a single slider, while unlinking lets you create asymmetric, organic, or blob-like shapes. Choose between px and % units and copy the CSS in one click.

→ Generate a perfectly consistent pill shape for buttons or tags.
→ Create a custom card corner radius that matches a design system.
→ Design organic blob shapes using extreme asymmetric radius values.
→ Produce a CSS border-radius for avatar images (full circle at 50%).
→ Quickly test how different border-radius values affect component feel.

How to Use the Border Radius Generator

1 By default, the Linked toggle is on — drag any slider to change all four corners equally.
2 Click the link icon to unlink the corners and adjust Top-left, Top-right, Bottom-left, and Bottom-right independently.
3 Switch the unit between px and % using the unit selector.
4 Watch the live preview update in real time.
5 Click Copy CSS to copy the border-radius property.

Key Features

🔗
Linked & unlinked modes

Lock all four corners together or set each one independently.
📐
px and % units

Switch between pixel values and percentage-based radii with one click.
👁️
Live preview

See the shape change in real time as you adjust each corner.
📋
Copy CSS

One-click copy of the complete border-radius declaration.

Example Usage

Example Input

TL: 12px, TR: 12px, BL: 12px, BR: 12px (Linked, px)

Example Output

border-radius: 12px;

Frequently Asked Questions about the Border Radius Generator

What is the Border Radius Generator?: The Border Radius Generator is a free online tool that lets you create custom CSS border-radius shapes visually and get the code. It runs entirely in your browser, so there is nothing to install and nothing is uploaded to a server.
Is the Border Radius Generator free?: Yes — the Border Radius Generator is completely free, with no account, subscription, signup, or usage limits.
Is my data uploaded or stored?: No. The Border Radius Generator processes everything locally in your browser. Your input is never uploaded, saved, or shared with any server.
Does the Border Radius Generator work offline?: Yes. Once the page has finished loading, the Border Radius Generator works without an internet connection.
Which browsers does the Border Radius Generator work in?: The Border Radius Generator works in all modern browsers, including Chrome, Firefox, Safari, and Edge — no plugins or extensions needed.
How do I make a perfect circle with CSS?: Set all four corners to 50% with the unit set to %. This produces a full circle when applied to an element with equal width and height.
What creates a pill/capsule shape?: Set all corners to a large px value (e.g. 9999px) or 50%. For rectangular elements, large px values create the classic pill / capsule button shape.