CSS Border-Radius Generator

What is CSS Border-Radius Generator?

CSS Border-Radius Generator is a free visual editor for the CSS border-radius property, built for front-end developers and designers. Use the range sliders and number inputs to set each corner's horizontal and vertical radius in pixels, pick a unit, and switch on elliptical mode to get the slash syntax for oval corners. A live preview box shows the rounded shape in real time, and the compact shorthand declaration is generated for you to copy. Pick a preset such as Rounded, Pill, Circle or an organic Blob from the segmented control to start fast, then fine-tune any corner. Use it to design soft cards, pill buttons, perfect circles, squircles and blobby decorative shapes without memorizing the corner order.

How to use CSS Border-Radius Generator

1. Pick a preset (Rounded, Pill, Circle or Blob) from the segmented control to load a starting shape.
2. Drag each corner's range slider or type a number to set the horizontal radius for that corner.
3. Turn on Elliptical to reveal a second vertical radius per corner and produce oval corners with the slash syntax.
4. Choose the unit (px or %) in settings; percentages scale the radius with the box size.
5. Watch the live preview update, then copy the generated border-radius shorthand into your stylesheet.

Examples

All four corners 16, elliptical off

border-radius: 16px;

Preset Pill, all corners 9999

border-radius: 9999px;

TL 40/20, TR 10, BR 40/20, BL 10, elliptical on

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Frequently asked questions

What order are the four corners in?

The shorthand lists corners clockwise starting from the top-left: top-left, top-right, bottom-right, bottom-left. This tool always outputs all four values in that order, so the result is unambiguous and easy to tweak by hand afterward.

What does elliptical mode do?

Border-radius can take a horizontal and a vertical radius per corner, separated by a slash, to draw oval (elliptical) corners instead of circular ones. Turn on Elliptical to set a second vertical radius for each corner; the output then uses the 'horizontal / vertical' slash syntax.

Should I use px or percent?

Pixels give a fixed corner size regardless of the box. Percentages are relative to the box's width and height, so 50% on every corner turns a square into a perfect circle and the rounding scales as the element resizes. Switch the unit in settings.

How do I make a perfect circle or a pill?

Choose the Circle preset (50% on every corner) for a circle from a square, or the Pill preset (a very large pixel radius) so the short sides become full half-circles. You can also start from a preset and fine-tune individual corners.

Is my data uploaded anywhere?

No. The generator runs entirely in your browser with JavaScript — your radius values are never sent to a server, so it works privately and even offline once the page has loaded.