Border Radius Generator

Round corners individually and copy the border-radius CSS. Runs entirely in your browser.

All corners24px
CSS
border-radius: 24px 24px 24px 24px;

Processed on your device. This file is never uploaded.

  1. 1Link the corners for a uniform radius, or unlink to shape each.
  2. 2Drag the sliders and watch the box change.
  3. 3Copy the border-radius CSS.

Corners, exactly how you want them

Rounded corners are simple until you want them uneven — a card with two rounded top corners and square bottom ones, say. This generator gives each corner its own slider and shows the result live, so you can shape a box precisely instead of guessing at four numbers.

The right shorthand

The output uses the standard clockwise shorthand, so it drops straight into your stylesheet. Keep the corners linked for a uniform radius, or unlink them for asymmetric shapes. It all runs on your device with nothing to upload.

Frequently asked questions