CSS Border Radius Generator

What this tool does

This tool lets you shape rounded corners by eye and gives you the matching CSS border-radius value. You drag a slider for each of the four corners and a live preview box updates in real time, so you can see exactly how the shape looks before you commit. It helps front-end developers who want a precise value without trial and error, designers building a component style, and anyone learning how border-radius controls corner curves.

Because each corner has its own slider, you are not limited to uniform rounding. You can round only the top, make a pill shape, or curve a single corner for a tab or card.

How to use it

1. Drag the top left slider to set the curve of the top left corner.
2. Drag the top right slider for the top right corner.
3. Drag the bottom right slider for the bottom right corner.
4. Drag the bottom left slider for the bottom left corner.
5. Watch the preview update with every change until the shape looks right.
6. Copy the generated CSS border-radius rule and paste it into your stylesheet.

A quick example

To make a card with a rounded top and a flat base, raise the top left and top right sliders to the same value and keep the bottom left and bottom right at zero. The preview shows a tab-like shape, and the copied rule reads something like border-radius: 16px 16px 0 0;. A common gotcha is forgetting that the values run clockwise from the top left, so check the preview if a corner curves where you did not expect.

It runs entirely in your browser, keeps your work private, is completely free, and needs no sign-up.