CSS Border Radius Generator
Round each corner in px or %, switch on elliptical mode for organic blob shapes, watch the live preview, and copy the exact border-radius CSS.
- Free, no account
- No watermark
- No usage limit
About the CSS Border Radius Generator
Rounding all four corners the same amount doesn't need a tool. You already know border-radius: 8px, you type it, you move on. This generator is for everything past that, and mostly for the one thing almost nobody hand-writes correctly: the elliptical two-radius syntax that makes those soft, organic blob shapes. That's eight numbers split across two axes, and no developer pictures the result from the numbers alone. So you drag corners, the shape morphs on a live preview, and the exact border-radius: line writes itself. Copy it, paste it into your stylesheet, done. It all runs in your browser, nothing gets uploaded.
Two things ours does that the quick generators skip. It labels every corner by name, so you never have to remember that the third value in the shorthand is bottom-right and not bottom-left (that swap is the classic reason a shape comes out mirrored). And it collapses the output to the shortest valid form for you. Set all four corners to 12 and you get border-radius: 12px, not the bloated 12px 12px 12px 12px a lot of tools hand you. Clean CSS you can paste without tidying it up first.
How to use
- Drag a corner. Each corner has its own labeled slider, top-left, top-right, bottom-right, bottom-left. Drag one and the preview rounds in real time. Want all four the same? Set them to one number and the output collapses to the short form on its own.
- Pick px or percent. px draws a fixed curve at any size. Percent scales with the element and is how you get circles and ovals. More on which to reach for below.
- Start from a preset. Rounded, Pill, Circle, and Blob drop you onto a real shape, so you're editing something instead of building from zero.
- Turn on Elliptical corners for the organic, egg-shaped curves. Each corner splits into a horizontal and a vertical radius, and the output switches to the slash syntax. This is the setting behind every blob.
- Copy the CSS. The box always shows the shortest correct declaration. Hit Copy CSS and paste it in.
Elliptical corners, the part worth opening a tool for
Flip on Elliptical corners and each corner splits into a horizontal radius and a vertical one. The output switches to slash syntax, horizontal radii before the slash, vertical radii after:
border-radius: 50px 20px / 30px 10px;
When the two radii on a corner differ, that corner stops being a quarter-circle and becomes a stretched, lopsided arc. Do that with different numbers on all four corners and you get the soft, irregular blob you've seen behind hero sections and used as image masks, the kind of shape that looks hand-drawn rather than boxy.
The honest reason a generator beats the docs here is the workflow. Writing an eight-value elliptical declaration by hand means holding eight numbers and two axes in your head, changing one, saving, alt-tabbing to the browser, squinting, then going back to nudge it again. It's tedious, and most people give up and settle for whatever they landed on by the third try. Dragging a slider with the shape changing live in front of you turns that into a two-second adjustment. The Blob preset drops you into a finished one so you can feel how the corners push and pull, then you drag from there. This is the single thing I'd actually open a generator for. (MDN's border-radius reference has the full spec if you want it.)
A related trick: put an uneven radius on an image and you mask the photo into the same soft shape. Good for team headshots, feature cards, anywhere a hard rectangle feels too rigid.
px or percent, and why 50 percent makes a circle
Pixels are absolute. border-radius: 8px draws an 8-pixel curve whether the element is a tiny tag or a full-width hero, which is exactly what you want for buttons and inputs that should look consistent down a page. The rounding shouldn't balloon just because one button happens to be wider.
Percentages are relative, and they work per axis. The horizontal radius is a percentage of the element's width, the vertical radius a percentage of its height. So 50% on a 200 by 100 box means 100px across and 50px down at every corner, the arcs meet in the middle of each edge, and the result is an ellipse. On a square, width equals height, the arcs meet dead center, and that ellipse is a circle. That is the whole reason 50% makes a circle, and also why it hands you an oval the moment the element isn't square. Square it first if a circle is what you were after.
Reach for percent when you want the shape to scale with the element, circles, avatars, pills. Use px when the curve should stay put no matter the size. Circle and Pill are both preset buttons if you just want the shape and don't care to think about the math.
The overflow trap when you round a card
You round a card's corners, it looks great, and then a full-bleed image at the top or a colored header strip pokes out past the curve with sharp square corners. The rounding is on the parent, the child doesn't know about it. Add overflow: hidden to the rounded parent and the child gets clipped to the same rounded shape.
But overflow: hidden clips everything that leaves the box, not just the corners. A dropdown, a tooltip, a focus ring, a child's shadow, any of them can get sliced off by that same clip. So if one card needs both rounded clipping and something that escapes its bounds, you can't get both from a single element. The usual fix is to split them, the rounded clipped visual in one box and the overflowing menu in a sibling. Worth knowing before you lose twenty minutes wondering why half your dropdown vanished.
Frequently asked questions
How do I round only the top two corners?
Set the two bottom corners to zero and leave the top two curved, the standard shape for a card header or a tab strip. In the tool, drag just the top-left and top-right sliders and leave the others flat. If you'd rather write it straight into CSS, the longhand properties border-top-left-radius and border-top-right-radius each target a single corner, so you can round the top of a box without touching the bottom at all.
What's the largest border-radius, and why does 9999px give a clean pill?
There's no number you have to calculate. A browser caps each corner at the biggest radius the element can actually fit, so any value past that point just rounds the end fully, which is where the pill trick comes from. Set something huge like 9999px and both ends round to a half-circle no matter how wide the button gets, with no recomputing when the width changes, and that is what the Pill preset sets up for you.
Can I use em or rem instead of px and percent?
Yes. border-radius takes any CSS length, em, rem, vw, and the rest. em scales with the element's own font size and rem with the root font size, which is handy when you want the rounding to grow along with your type scale. The tool sticks to px and percent because they cover almost every real case and keep the preview honest, but the corner values you build here behave the same if you swap the unit in your stylesheet.
Does rounding the corners change where the element is clickable?
No. border-radius only changes what gets painted. The box itself is untouched, so width, height, padding, margin, and the room neighbors take are identical to an unrounded element. The clickable area also stays a full rectangle, which means the invisible corners of a round button still register clicks. If you need the click target to match the visible curve, that's a job for clip-path, not this.
Can I animate between two shapes?
Yes, and it's a nice touch on buttons, a square that eases into a pill on hover reads as polished. Put a transition on border-radius and give the element a hover state with the second shape. Keep it quick, around 0.2 to 0.3 seconds, since a slow morph reads as sluggish. Build both shapes here, copy each, and drop them into your base and :hover rules. Keep both declarations the same structure, both four-value or both slash-syntax, or the browser may snap instead of easing.
Why does cranking one corner seem to shrink another?
When two radii along the same edge add up to more than that edge is long, the browser scales every radius down proportionally so they still fit inside the box. So on a short element, pushing one corner way up can visibly pull its neighbors down, they're being rescaled to make room. The spec does that on purpose, so the shape stays drawable at any size. If a corner refuses to get as round as you want, the element is simply too small for the number you asked for.