Can I set different radii for each corner?

Yes. Click the link/unlink toggle to switch between uniform and individual corner mode. When unlinked, each corner has its own slider.

What is the maximum border-radius value?

The sliders go up to 100px. For a perfect circle, set all corners to half the element's width or use 50% in your actual CSS.

Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.

Yes. The border-radius property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.

Adjust corner radii visually and copy the CSS code.

Top Left16px

Top Right16px

Bottom Right16px

Bottom Left16px

border-radius: 16px;

Step 1

Choose linked or unlinked mode for uniform or individual corners.

Step 2

Drag the sliders to set the radius for each corner.

Step 3

Preview the shape in real-time above the controls.

Step 4

Copy the generated CSS code with one click.

Four corner sliders for top-left, top-right, bottom-right, and bottom-left.

Link toggle for uniform or individual corner control.

Live preview that updates in real-time.

One-click CSS code copy to clipboard.

Completely free with no sign-up required.

: Yes. Click the link/unlink toggle to switch between uniform and individual corner mode. When unlinked, each corner has its own slider.
: The sliders go up to 100px. For a perfect circle, set all corners to half the element's width or use 50% in your actual CSS.
: Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.
: Yes. The border-radius property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.