Skip to content
I Hate Online Tools

Border radius generator

Per-corner and elliptical border-radius.

Runs in this tab. The file stays here.

Preview
CSS
border-radius: 16px 16px 16px 16px;

This runs in your browser. Nothing is uploaded.

About Border radius generator

Set per-corner CSS border-radius with a live preview and copyable output.

One radius value is easy. Four different corners — pill on the right, sharp on the left — is where people open a generator. This page exposes each corner, shows the shape, and emits the shorthand or longhands you can paste.

Use it for cards, avatars, and weird marketing blobs that still need to be plain CSS. The preview is the only place the radius is applied until you copy it. Combine with box-shadow when the rounded shape also needs depth.

Flexbox and grid generators help with layout around the rounded box; they do not replace radius. Keep radius here so layout and shape stay separate concerns.

How to use Border radius generator

  1. 1Adjust each corner’s radius (or linked controls if you want them equal).
  2. 2Watch the preview update.
  3. 3Copy the border-radius CSS.

What it won't do

  • Preview is decorative — not a full component library.
  • Elliptical two-value corners may need a manual tweak.

Common questions

Can each corner have a different radius?

Yes. That is the point of the per-corner controls — not only a single global value.

Does this support elliptical radii (two values per corner)?

The tool focuses on the common single-length-per-corner case. For full elliptical syntax you can edit the copied CSS by hand.

Will copying this change my production CSS automatically?

No. Clipboard only. You decide where it lands.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app