Skip to content
QuicklyTools

CSS Border Radius Generator

Set rounded corners per corner in px, % or rem with a live preview and the shortest valid CSS.

Runs in your browser
Loading tool…

About the CSS Border Radius Generator

Round corners consistently across buttons, cards and images. Adjust all corners together or individually and copy the shortest equivalent CSS — the generator collapses values like 8px 8px 8px 8px to just 8px. Pixel, percent and rem units are supported.

How to use it

  1. Choose a unit.
  2. Adjust corners (linked or individually).
  3. Copy the border-radius declaration.

Good to know

  • 50% on a square makes a circle; 9999px makes pill-shaped buttons.

Frequently asked questions

What is the order of values?

Top-left, top-right, bottom-right, bottom-left (clockwise).

Can I make elliptical corners?

Yes with the slash syntax (e.g. 50% / 25%), which you can add to the copied CSS.

Related tools

CSS Box Shadow GeneratorCSS Gradient GeneratorPX to REM ConverterCSS Unit Converter

More generators →