About the CSS Border Radius Generator
This CSS border radius generator builds the border-radius property for you. In corner mode, set the top-left, top-right, bottom-right and bottom-left radius in pixels, rem or percent; in blob mode, set separate horizontal and vertical radii for every corner — the eight-value slash syntax behind the organic “blob” shapes popular in modern landing pages. The preview updates as you type and the CSS is always written in its shortest valid form.
It is meant for front-end developers and designers styling cards, buttons, avatars, pills, image masks and decorative shapes, and for anyone who can never remember which order the four values go in (it is clockwise from the top-left). A Tailwind CSS arbitrary-value class and the four longhand properties are included too.
Enter the preview box size to see how the browser will really draw it: when adjacent radii add up to more than the side they share, CSS scales every radius down by the same factor so the curves never overlap. The tool calculates that factor so you can tell when a larger value will make no visible difference.
How to use the css border radius generator
- 1Choose corner mode for normal rounded corners or blob mode for organic shapes.
- 2Pick px, rem or % and set each corner — or the eight horizontal and vertical percentages.
- 3Set the preview size to match your element and watch the live shape.
- 4Check the scale factor: below 100% means smaller values would look identical.
- 5Copy the CSS, the Tailwind class or the longhand properties.
Formula and method
border-radius lists the corners clockwise from the top-left. With one value all corners match; with two, the first sets top-left and bottom-right and the second top-right and bottom-left; with three, the middle value is shared by top-right and bottom-left. The generator compares the corners and writes the shortest of these forms. Values after a slash are the vertical radii, which turns each corner from a circle into an ellipse; percentages are of the box width for horizontal radii and of the height for vertical radii.
When the radii on any side add up to more than that side’s length, the CSS Backgrounds and Borders specification scales every radius by the same factor f — the smallest ratio of side length to radius sum — so the curves meet instead of overlapping. The scale factor output shows that value for the preview box size.
- TL, TR, BR, BL
- Horizontal radius of each corner, clockwise from top-left
- TLᵥ … BLᵥ
- Vertical radius of each corner (after the slash)
- f
- Uniform scale factor the browser applies when radii overlap
Worked examples
Alternating corners collapse to two values
Top-left and bottom-right are both 32px, and top-right and bottom-left are both 8px, so the four values shorten to “32px 8px”. 32 + 8 = 40px is far less than both sides, so nothing is scaled.
Classic blob shape
The horizontal radii (30 70 70 30) and vertical radii (30 30 70 70) differ, so the slash syntax is needed. Each pair along a side adds to 100%, exactly filling it, so the browser does not scale anything and the curves join smoothly.
Oversized radius on a small button
On a 48px-tall box, the left side holds two 40px radii totalling 80px. CSS scales every radius by 48 ÷ 80 = 0.6, so each is drawn at 24px — exactly a pill shape. Any value from 24px up looks the same.
Frequently asked questions
What order do border-radius values go in?+
Clockwise starting at the top-left: top-left, top-right, bottom-right, bottom-left. Two values mean top-left & bottom-right, then top-right & bottom-left. Three values mean top-left, then top-right & bottom-left, then bottom-right.
How do I make a circle with CSS?+
Give the element equal width and height and set border-radius: 50%. On a non-square element 50% produces an ellipse; for a pill shape use a pixel radius of at least half the height, such as 9999px.
What does the slash in border-radius mean?+
Values before the slash are horizontal radii and values after it are vertical radii, so each corner becomes a quarter-ellipse instead of a quarter-circle. border-radius: 50% / 10% makes wide, flat curves. This is how CSS blob shapes are made.
Why does increasing the radius stop changing the shape?+
If two radii on the same side add up to more than the side’s length, the browser shrinks all radii by the same factor until they fit. Beyond that point bigger values change nothing, which is why the scale factor is shown.
Does border-radius clip images and backgrounds?+
Backgrounds and borders follow the rounded corners automatically. Child content such as an image that overflows the corners is only clipped if you also set overflow: hidden (or overflow: clip) on the rounded element.