CSS Border Radius Generator

A generator that shows the corners as they are actually drawn on a real box

The CSS border-radius generator builds border-radius code from the four corner radii and shows how that value is drawn on a box of real size. Give a 320px by 200px card border-radius: 16px; and each corner is cut into a quarter circle with a 16px radius. Set the horizontal and vertical radii separately and you get elliptical corners with a slash (/), such as border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.

Type a number into a corner field or drag a rail handle on the stage, and the shape and the code change together. When a radius is so large that neighboring curves overlap, the browser scales every radius down by the same factor. This tool shows the scaled values with guides and side-check bars, and a single click on "Use the scaled values" brings the fields in line with what is drawn. It also shows the same value on button, tag, input, card, photo and avatar sizes, and calculates the inner radius for a photo placed inside a card.

Why picking a number alone goes wrong

The same 24px makes a pill with half-circle ends on a 44px-tall button, but only slightly rounded corners on a large card. Percentages are based on the box width and height separately, so unless the box is square you get elliptical corners, not circular ones. That is why a radius depends on what size of box it goes on, and why this tool puts the box size next to previews of real elements.

• Setting the corner steps of a design system: before you fix values such as 8px for buttons and 16px for cards, compare how the same value looks on a button, tag, card and photo on one screen.
• Turning a design's values into code: enter the box size from the mockup and adjust the corners, and you will see whether the browser scales the radii down before you paste the code.
• Making a pill button or a round photo: check on which boxes 9999px and 50% give the same shape and on which they differ.
• Needing an organic shape such as a drop or a blob: matching eight values with a slash by hand is hard. Start from an example and fine-tune it with the handles.
• Putting a photo or button inside a card: giving the inner element the same value as the outer one makes the gap look thicker at the corners. Enter the gap and the tool returns the right inner radius.

How to use it

1. Click a close shape under "Pick a shape", or enter the width and height of the box you will actually use.
2. Choose the unit (px or %) and the radius mode (circular or elliptical). With elliptical, each corner gets a horizontal (↔) and a vertical (↕) field, and vertical radius rails appear on the left and right of the stage.
3. Type numbers into the four corner fields or drag the handles on the rails. With a handle focused, the arrow keys change the value by 1, or by 10 with Shift. Turn on "All corners together" and changing one corner moves the rest.
4. When a side-check bar turns orange, the radii on that side add up to more than the side length, so the browser draws them scaled down. If you need the numbers as drawn, click "Use the scaled values".
5. Use "See it at real size" to check other elements, then take the code with "Copy CSS". You can choose the shorthand or per-corner properties and px or rem, and "Copy link" puts the current settings in the address.

Value order and shorthand

The values of border-radius start at the top left and go clockwise: top right, bottom right, bottom left. If you write fewer values, a missing corner copies one you have written. A missing bottom left equals the top right, a missing bottom right equals the top left, and a missing top right equals the top left.

With two values, the pairs are diagonal, not top and bottom. The values before the slash are horizontal radii, the values after it are vertical radii, and both lists follow the same shorthand rules. To change a single corner, use border-top-left-radius, border-top-right-radius, border-bottom-right-radius or border-bottom-left-radius; there you write horizontal and vertical values separated by a space, with no slash, as in 40px 20px. The "Shorthand" code of this tool compresses equal values as far as possible, and "Per corner" outputs the four properties separately.

How px and % are drawn differently

A px radius is the same length whatever the box size. A % radius is calculated from the width of the border box for the horizontal radius and from its height for the vertical radius. So the same 10% on a 300px by 180px card becomes an elliptical corner of 30px horizontal and 18px vertical. The table below shows the radii (horizontal × vertical) the browser actually draws when the same value goes on three sizes.

If you want the same roundness on elements of different sizes, px is the right choice; if you want a curve proportional to the box, use %. When you switch units in this tool, the values are recalculated so the shape you see stays the same. Converting px to % on a non-square box makes the horizontal and vertical values differ, so it becomes an elliptical radius.

Why a bigger value does not make it rounder

The specification compares, for each side, the sum of the radii of the two corners that touch it with the side length. For the top and bottom sides it compares the two horizontal radii with the width, and for the left and right sides the two vertical radii with the height. Take the smallest "side length ÷ radius sum" over the four sides and call it f. If f is below 1, every corner radius is multiplied by f. A quarter circle stays a quarter circle and the large radius is still larger than the small one, but corners that were already small shrink too.

In the third row, the large top left radius shrinks the other three corners you set to 10px down to 6.25px. To keep the small corners exact, lower the large radius so it fits within the side length. The 9999px often used for pill buttons relies on this rule: the radius is reduced to half the shorter side, so the ends are always half circles whatever the height.

Elliptical corners and the slash

A corner is a quarter of an ellipse with a horizontal and a vertical radius. When the two are equal it is a quarter circle; when they differ, the curve is stretched in one direction. border-radius: 50% / 60% 60% 40% 40%; uses half the width horizontally everywhere, and vertically 60% of the height for the two top corners and 40% for the bottom ones, which gives an egg that is longer at the top. If all eight horizontal and vertical values differ, you get a hand-drawn, blob-like shape.

If either the horizontal or the vertical radius is 0, that corner is drawn square with no curve. But the non-zero value still counts toward the sum on that side, so it can shrink the other corners. Drawing it in Chrome confirms that the other corners shrink as the specification says. Radii cannot be negative, and a declaration containing a negative value is ignored.

Inner element radius: outer − gap

When you put a photo inside a card with the same gap on every side, the photo's corner has to curve by the gap amount further inward for the space between the two curves to look even. The specification derives the inner curves of a box the same way. The radius of the padding edge is the outer radius minus the border width, the radius of the content area is that minus the padding, and anything below 0 becomes 0.

If the inner element gets the same value as the outer one, the gap at the corners becomes thicker than along the sides, and the photo looks pushed inward. "Match the inner corners" above puts the two cases side by side. Even when the outer radius is set in %, the inner value is given in px, subtracted from the drawn radius.

When the photo inside sticks out past the corners

Giving a parent box a radius does not clip its child elements by itself. According to the specification the background is clipped along the curve, but to keep a child from going outside the curve you have to set the parent's overflow to something other than visible (hidden or clip). The clipping then follows the inner curve of the border. You can also give the photo itself a radius, because the content of a replaced element such as img is clipped to its own curve.

A radius also shrinks the clickable area. Pointer events are clipped along the rounded border too, so a 44 × 44px button with 50% can be pressed only over the area of a circle, about 78.5% of the square. The specification likewise advises that when you use large radii you should leave enough width and height to keep the recommended minimum touch size.

Values for common shapes

These are the twelve values under "Pick a shape". You need the box size as well to get the same shape, and % values in particular change shape when the box proportions change.

Browser support and the new corner-shape property

All major browsers have supported border-radius for a long time, so you can use it without a prefix. On pages written right to left or vertically, logical properties such as border-start-start-radius move the corner with the writing direction. corner-shape, from the CSS Borders 4 editor's draft, changes the shape of the curve inside the area set by the radius to one of round, squircle, bevel, scoop, notch, square or superellipse(). It is still experimental and only shows in Chrome 139 and later, and the preview of this tool draws only the round curve of border-radius.

Common mistakes

• Thinking the order is counterclockwise: the four values go top left → top right → bottom right → bottom left, clockwise.
• Reading two values as top and bottom: in 16px 8px, the top left and bottom right are 16px and the top right and bottom left are 8px. To round only the top, use 16px 16px 0 0.
• Using 50% on a rectangle and expecting a pill: if width and height differ, 50% gives an ellipse. For a pill with half-circle ends only, use a px value of at least half the height, or 9999px.
• Putting a slash on every corner: using two slashes, as in 10px / 20px 30px / 40px, makes the whole declaration ignored. Use one slash between the list of horizontal values and the list of vertical values.
• Giving a radius only to the parent and letting the photo stick out: set overflow: hidden on the parent, or give the photo a radius too.
• Giving the inner element the same value as the outer one: the gap gets thicker at the corners. Use the outer radius minus the gap.
• Assuming one reference for a % radius: the horizontal radius is based on the width and the vertical radius on the height, so on a non-square box the same % gives two different lengths.

Limits and notes

• Input units are px and %. rem is an output format that shows the px value divided by a root font size of 16px; em, vw and other units are not handled.
• Radii go to one decimal place, 0 to 9999 for px and 0 to 100 for %, and the box is 40 to 800px wide and 40 to 600px high. A box larger than the stage is shown scaled down, with the scale shown at the top left of the stage.
• The box size is taken to include the border. If a real element has a border or padding and box-sizing is content-box, the size that % radii are based on is larger than the width and height you entered.
• The specification allows a browser to reduce a radius further when a curve would collide with something like a scrollbar. In that case the result can be smaller than this tool's calculation.
• The inner radius is calculated assuming the same gap on all sides. If the left and right gaps differ from the top and bottom ones, subtract the left and right gaps from the horizontal radius and the top and bottom gaps from the vertical radius.
• corner-shape is not previewed. How smooth the edge of a curve looks can vary slightly with the screen scale and the device pixel ratio.

As of W3C CSS Backgrounds and Borders Module Level 3 (Candidate Recommendation Draft 2024-03-11), CSS Borders and Box Decorations Module Level 4 (Editor's Draft 2026-10-15) and the MDN compatibility data (browser-compat-data 8.1.6) were checked against the originals on 2026-10-22. The numbers in the tables come from this tool's calculation core, and the overlap scaling and the handling of a 0 axis were checked by actually drawing them in Chromium 151.

Sources

• 01W3C: CSS Backgrounds and Borders Module Level 3Candidate Recommendation Draft 2024-03-11. §4.1 value order, omitted values, slash, % reference, negative values invalid; §4.2 inner curves (outer − border); §4.3 clipping along the curve; §4.5 overlapping curves f = min(L/S)
• 02MDN: border-radiusSyntax and examples, browser compatibility (four values Chrome 4, Firefox 4, Safari 5; % values Chrome 8, Firefox 4, Safari 5.1)
• 03W3C CSSWG: CSS Borders and Box Decorations Module Level 4Editor's Draft 2026-10-15. corner-shape values round, scoop, bevel, notch, square, squircle, superellipse()
• 04MDN: corner-shapeExperimental feature; compatibility data Chrome 139, with Firefox and Safari in preview builds
• 05MDN: border-start-start-radiusLogical corner property that follows the writing direction; compatibility data Chrome 89, Firefox 66, Safari 15

Frequently asked questions

Tools to use with this one