FlowToolkit
Utility

Border Radius Generator

Easily create and preview CSS border-radius styles.

Loading tool…

About this tool

Adjust each corner of an element independently or link them for uniform rounding. Preview the shape in real time and copy the full CSS border-radius declaration.

Rounding corners with confidence

Border-radius is one of the most frequently used CSS properties. From subtle 4px rounding on buttons to pill-shaped badges to fully circular avatars, the right radius makes an interface feel polished and intentional. The challenge is translating the visual you have in your head into a CSS value — that is where a live preview helps.

This generator supports both linked (uniform) and independent corner control. Link the corners to adjust them all at once, or unlink to create organically shaped elements with different radii on each corner.

Quick presets

  • 0px — sharp squares and rectangles.
  • 4–8px — subtle rounding for buttons, cards, inputs.
  • 12–24px — noticeable rounded panels and modals.
  • 50px+ — pill shapes and circles (with equal width and height).

Frequently asked questions

Can I set different values for each corner?

Yes. Unlink the corners to set top-left, top-right, bottom-right, and bottom-left independently.

What values should I use?

Small values (2-8px) give subtle rounding. Medium values (12-24px) create noticeable rounded corners. Large values (50px+) produce pill or circle shapes.

Can I copy the CSS?

Yes. The generated CSS is displayed in real time and can be copied with one click.