What order does border-radius shorthand use?

Top-left, top-right, bottom-right, bottom-left — clockwise starting at the top-left corner.

How do I make a perfect circle?

Give a square element border-radius: 50%. On a rectangle the same value produces an ellipse.

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

Shape boxes, pills and organic blobs by setting each corner's radius. Link the corners for uniform rounding or unlink them for asymmetric shapes.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Link all corners

Top-left24px

Top-right80px

Bottom-right24px

Bottom-left80px

Box color

Live preview

Generated CSS

.box {
  background: #00ff66;
  border-radius: 24px 80px 24px 80px;
}

.box {
  background: #00ff66;
  border-radius: 24px 80px 24px 80px;
}

01Adjust the controls on the left or pick a preset to start the Border Radius Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.