About the Border Radius Generator
The border-radius property rounds the corners of a box in CSS. You can set each of the four corners separately, which makes leaf shapes, tabs, speech bubbles and blobs. This generator lets you type a value for each corner, choose pixels, percent or rem, and shows a preview box at once. It writes the shortest possible CSS, using one, two, three or four values as needed. Type a value for each of the four corners and the unit and the border-radius CSS appears at once, with a few related figures underneath, and you can copy the result with one tap. The sums run in your browser, so nothing you enter is uploaded.
Updated October 2026
How to use the Border Radius Generator
- 1Enter a value for each of the four corners and the unit.
- 2Pick the units or options from the menus if the border-radius CSS tool offers them.
- 3Read the border-radius CSS in the large result box.
- 4Look at the extra rows for related figures.
- 5Press Copy result to keep the answer.
When you need the border-radius CSS
Front-end developers use it for buttons, cards, avatars and images. Designers use unequal corners for organic shapes, and the live preview makes it easy to experiment without editing and reloading a page.
Percent values are relative to the size of the box, so 50% gives a circle on a square and an ellipse on a rectangle. Pixels and rem give the same curve on every box, which suits buttons and cards that vary in size.
How the border-radius CSS is worked out
CSS reads the four values clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. If the opposite corners match the shorthand can be shortened to two or three values, or to one when all are equal. Values of 30, 10, 30 and 10 pixels produce border-radius: 30px 10px; because the top-left matches the bottom-right and the top-right matches the bottom-left. A value of 50% on a square makes a perfect circle, and 10px on all corners gives the usual softly rounded button.
Every answer on this page comes from that one rule, so you can check any result by hand with a calculator. The figures shown underneath, such as other units, are conversions of the same answer.
- Four corners and three units
- Live preview
- Shortest shorthand
Mistakes to avoid with border-radius CSS
If a radius is larger than half the shortest side, browsers shrink all the radii together, so a very big number may not look different from a smaller one. Also, the preview box is a fixed shape; test the result on your own element.
On phone and computer
On a phone, type into the boxes one after another and read the border-radius CSS underneath; Copy result puts it on the clipboard for a message or a note. On a computer the inputs sit on the left and the answer on the right, so you can change one figure and watch the border-radius CSS move. The border radius generator works the same on both. Rounded corners look better with a matching shadow, so open CSS Box Shadow Generator and CSS Gradient Generator for the rest of the style. PX to REM Converter turns pixel values into rem, and Text Shadow Generator styles the text inside the box.
Features
- Corners run clockwise
- 50% makes a circle
- Large values are capped by the browser
- Clear messages when the border-radius CSS inputs make no sense
- Copy the result with one tap
- Private: nothing is uploaded
Frequently asked questions
How do I calculate border-radius CSS?
CSS reads the four values clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. If the opposite corners match the shorthand can be shortened to two or three values, or to one when all are equal. Values of 30, 10, 30 and 10 pixels produce border-radius: 30px 10px; because the top-left matches the bottom-right and the top-right matches the bottom-left. A value of 50% on a square makes a perfect circle, and 10px on all corners gives the usual softly rounded button.
What is the formula for border-radius CSS?
CSS reads the four values clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. If the opposite corners match the shorthand can be shortened to two or three values, or to one when all are equal. The border radius generator applies it exactly and rounds only the displayed answer to six significant figures.
What order do the four values go in?
Top-left, top-right, bottom-right, bottom-left, going clockwise.
How do I make a circle?
Use 50% on all corners of a square box.
What is the difference between px and %?
Pixels give a fixed curve. A percentage scales with the box, so the curve changes with its size.
Is this border radius generator free and private?
Yes. It is free, needs no account and runs in your browser, so the numbers you type are not uploaded or stored.