Border Radius Generator guide
Drag a slider per corner, link them, or switch to elliptical mode for organic blob shapes. The output is always the shortest border-radius shorthand that renders the same.
How the border-radius shorthand reads
border-radius takes one to four values and goes clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. One value rounds every corner the same. Two values mean top-left and bottom-right get the first, top-right and bottom-left get the second. Three values: top-left, then top-right and bottom-left, then bottom-right. Four values set each corner.
The generator always writes the shortest form that means the same thing. Set all four sliders to 16 and you get border-radius: 16px, not 16px 16px 16px 16px. Set 16, 0, 16, 0 and you get 16px 0. The comment lines under the output list each corner in plain words so you can sanity-check.
Elliptical corners and the slash
Each corner is really a quarter ellipse with a horizontal and a vertical radius. Usually they are equal, which gives a circular curve. Turn on Elliptical and you get a second row of sliders for the vertical radii. The CSS puts horizontal values before a slash and vertical values after it: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%.
That eight-value form is how the organic blob shapes you see on landing pages are made, no SVG needed. The Blob and Egg presets are starting points. Nudge the sliders until it looks right, then animate between two sets of values with a CSS transition for a slow morphing effect.
px, %, or rem
Pixels give a fixed curve no matter how big the element is. That is what you want for cards, buttons and inputs, so a small button and a big card share the same corner feel. Most design systems define a scale like 4, 8, 12 and 16px.
Percentages are relative to the element's own size: horizontal radii to its width, vertical radii to its height. border-radius: 50% on a square makes a circle; on a rectangle it makes an ellipse. Percent is also how blob shapes scale cleanly with their container.
rem ties the curve to the root font size, so corners grow when a user bumps up their default text size. That keeps proportions consistent in accessible, zoom-friendly layouts. Switching units in the tool converts values roughly, assuming 16px per rem, so the shape does not jump.
The pill trick, and why 9999px works
To make a pill button you want each end fully rounded no matter how long the label is. Setting a huge radius, like 9999px, does it. When corner radii add up to more than the box can fit, the CSS spec scales all of them down by the same factor until they fit. The short side ends up fully round and the long side stays straight.
50% does not do the same thing on a rectangle. It gives an ellipse, because the horizontal radius becomes half the width. For pills use a big pixel value; for circles use 50% on a square.
Worked example: a chat bubble
Chat bubbles round three corners and leave the one nearest the sender sharp. For an incoming message on the left, set top-left 18, top-right 18, bottom-right 18, bottom-left 4. The output is border-radius: 18px 18px 18px 4px. Flip it to 18px 18px 4px 18px for outgoing messages. The Tab preset (16px 16px 0 0) is the same idea for browser-style tabs that sit on a panel.
Pitfalls
Children spill over rounded corners. An image inside a rounded card still has square corners and pokes out. Add overflow: hidden to the card, or give the image a matching radius.
Nested radii should shrink. If a card has a 16px radius and 8px padding, the element inside should have 16 minus 8, so 8px, to keep the curves parallel. Using the same radius inside and out looks subtly wrong.
Borders and outlines follow the curve. Outlines followed border-radius only in recent browsers; very old ones draw a square focus ring. Test your focus states on a real device.
The generator runs entirely in your browser. The preview box uses the exact CSS string you copy.
How we calculate: sources
Frequently asked questions
What order do border-radius values go in?
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. Two values apply to opposite corner pairs; one value applies to all four.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after are vertical radii, which makes elliptical corners. It is how CSS blob shapes are made.
How do I make a circle with CSS?
Use border-radius: 50% on an element with equal width and height. On a rectangle, 50% gives an ellipse instead.
How do I make a pill-shaped button?
Use a very large pixel radius such as 9999px. The browser scales it down to fit, so the ends are fully round at any width.
Should I use px or % for border-radius?
Use px (or rem) for UI elements so corners look the same at every size. Use % when the curve should scale with the element, like circles and blobs.
Why does an image poke out of my rounded card?
Children are not clipped by the parent's radius. Add overflow: hidden to the card or give the image the same radius.
Does this tool upload anything?
Everything runs in your browser. Nothing you enter is uploaded to a server or stored by us.