Creator

Border Radius Generator

Generate CSS border-radius values with four per-corner sliders (0-200px) and an optional link-all mode to round every corner together. A live preview shows the result and the CSS is one click away.

Examples

Input

All corners 24px

Output

border-radius: 24px;

How it works

Drag the sliders and the preview square rounds its corners as you go. With Link all corners on, one value is used for all four; turn it off to set the top-left, top-right, bottom-right and bottom-left corners separately. The CSS underneath is ready to copy.

Border radius for images

The CSS this tool generates works on images exactly as it does on boxes. Copy the declaration and apply it to the img element.

img.avatar {
  border-radius: 24px;
}

For a perfectly round image, the image has to be square and the radius at least half its width: a 160px image needs 80px or more. In your own stylesheet you can also write border-radius: 50%, which stays round at any size.

How to use Border Radius Generator

Choose link mode

Keep Link all corners on to round uniformly, or turn it off for independent corners.

Adjust the sliders

Drag each corner slider from 0 to 200px and watch the preview update.

Copy the CSS

Copy the generated border-radius declaration for your stylesheet.

Why use this tool

Per-corner control

Link-all uniform rounding

Live shape preview

Copyable CSS output

Frequently asked questions

What's the maximum radius?

Each corner slider ranges from 0 to 200 pixels.

Can corners differ?

Yes, turn off Link all corners to set each corner independently.

How do I round the corners of an image with CSS?

Apply border-radius to the img element, for example img { border-radius: 16px; }. Set the value with the sliders here, copy the CSS and paste it into your stylesheet.

Found a bug or have an idea?

ToolOrbit is actively developed — feedback directly shapes what gets built next.

Send feedback