CSS · Design

Border Radius Generator

Tune each corner independently and copy the border-radius CSS in one click.

border-radius: 16px;

How to use

  1. Adjust top-left, top-right, bottom-right, and bottom-left radius.
  2. Preview the shape in real time.
  3. Copy the CSS border-radius value.

Features

  • Four corner sliders
  • Live preview
  • Copy CSS
  • Runs in your browser. Colors and images are not uploaded to ToolsWeb servers.

Privacy & how it works

This design utility runs in your browser. Colors, CSS, and images you enter are not uploaded to ToolsWeb servers for this tool. Privacy Policy.

FAQ

Can I set different radii per corner?expand_more

Yes. Each corner has its own slider. The copied CSS uses the standard tl tr br bl shorthand.

Is this tool free?expand_more

Yes. No signup and no paywall for core use.

Is my text uploaded?expand_more

No for this tool. Text stays in your browser while you work.

Do I need an account?expand_more

No. Open the page and start typing or pasting.

Related tools