Is the Border Radius Generator free to use?

Yes, the Border Radius Generator is completely free. No account, subscription, or signup is required — ever.

Does my data get uploaded anywhere?

No. The Border Radius Generator runs entirely in your browser. Your data is never sent to any server.

Does it work offline?

Yes. Once the page has loaded, the tool works without an internet connection.

Which browsers are supported?

All modern browsers — Chrome, Firefox, Safari, and Edge. No plugins or extensions required.

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;

What is the Free 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 Free 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 Free Border Radius Generator

What is the free Border Radius Generator?: Create custom CSS border-radius shapes visually and get the code.
Is the Border Radius Generator free to use?: Yes, the Border Radius Generator is completely free. No account, subscription, or signup is required — ever.
Does my data get uploaded anywhere?: No. The Border Radius Generator runs entirely in your browser. Your data is never sent to any server.
Does it work offline?: Yes. Once the page has loaded, the tool works without an internet connection.
Which browsers are supported?: All modern browsers — Chrome, Firefox, Safari, and Edge. No plugins or extensions required.
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.