CSS Border Radius Generator

Generate CSS border-radius with linked or independent corners, px or % units and separate horizontal and vertical elliptical radii. Use subtle, pill, circle and asymmetric presets, and copy or download CSS that exactly matches the preview.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Border Radius Generator

CSS Border Radius Generator creates rounded corners for any element. Link all four corners to one value, or set top-left, top-right, bottom-right and bottom-left independently, in pixels or percentages. Turn on elliptical corners to give each corner separate horizontal and vertical radii, which produces organic “blob” shapes and squircle-like effects.

Presets give you a subtle rounded card, a pill, a circle and an asymmetric shape to start from. The preview element receives exactly the border-radius value in the generated code, which is written in the shortest equivalent form. Copy it or download it as a .css file.

How to use

Pick a preset or start from the default 16px corners.
Choose px or %, and link or unlink the corners.
Turn on elliptical corners to set horizontal and vertical radii separately.
Enter values for each corner and check the preview.
Copy the CSS or download border-radius.css.

Key features

Linked or independent corners.
Pixel and percentage units.
Separate horizontal and vertical (elliptical) radii.
Subtle, pill, circle and asymmetric presets.
Shortest equivalent shorthand that matches the preview exactly.
Copy CSS, download .css and full Reset.

Best practices

Use the same radius across similar components for a consistent design.
Use 50% on a square element for a perfect circle.
Use a very large px value (such as 9999px) for pill-shaped buttons.
Remember percentages follow the element’s width and height.
Nested elements look best with a slightly smaller inner radius.

Benefits

Exact control over every corner.
Quickly create circles, pills and organic shapes.
Compact, correct shorthand.
Free and private.

Frequently asked questions

What does the slash in border-radius mean?

Values before the slash are horizontal radii and values after it are vertical radii, which makes elliptical corners. Without a slash, each corner is a circular arc.

In what order are the four values?

Top-left, top-right, bottom-right, bottom-left — clockwise from the top-left corner. Shorter forms repeat values, for example two values set top-left/bottom-right and top-right/bottom-left.

Why doesn’t 50% make a circle on my element?

50% creates a circle only when the element is square. On a rectangle, it creates an ellipse because percentages follow the width and height.

Why does 9999px make a pill shape?

When radii are larger than the element allows, browsers scale them down proportionally until they fit, which gives fully rounded ends.

What does linking corners do?

With corners linked, one set of values applies to all four corners. Unlink them to set each corner separately.

Does the preview match the CSS exactly?

Yes. The preview element is given exactly the border-radius value shown in the generated code.

Is anything uploaded or saved?

No. The CSS is generated by JavaScript in your browser. Settings and any image you choose stay on your device and are not saved in browser storage; Reset clears them.