CSS Border Radius Generator
Shape any box with border-radius: drag the handles or sliders for each corner, switch to the advanced 8-value syntax for elliptical corners and organic blobs, and copy the CSS. It all runs in your browser.
Drag the round handles on the shape (or focus one and use the arrow keys).
Corners
How to use the CSS Border Radius Generator
- Choose a mode: Simple for one radius per corner, or Advanced for separate horizontal and vertical radii.
- Pick a unit (px or %) and drag the sliders, or drag the round handles on the shape itself.
- Try a preset like Pill or Drop, or press Random blob until you like the organic shape.
- Set the preview size to match your element, because percentages and large radii depend on it.
- Press Copy CSS and paste the border-radius rule into your stylesheet.
border-radius shorthand cheat sheet
| You write | Top-left | Top-right | Bottom-right | Bottom-left |
|---|---|---|---|---|
10px | 10px | 10px | 10px | 10px |
10px 20px | 10px | 20px | 10px | 20px |
10px 20px 30px | 10px | 20px | 30px | 20px |
10px 20px 30px 40px | 10px | 20px | 30px | 40px |
50% / 25% | 50% × 25% | 50% × 25% | 50% × 25% | 50% × 25% |
The longhand properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. Each accepts one value (a circular corner) or two values separated by a space (horizontal, then vertical) for an elliptical corner. Note the order differs from the shorthand: in the longhand the two values are separated by a space, not a slash.
Worked example: how overlapping radii are scaled
Take a box 200px wide and 100px tall with border-radius: 80px. Along the 100px sides, the top and bottom radii add up to 160px, which is more than 100px. CSS computes a factor for every side (side length ÷ sum of its two radii) and applies the smallest one to all radii: 100 ÷ 160 = 0.625, so every corner is drawn at 80 × 0.625 = 50px. The result is a pill, exactly like border-radius: 50px. That is why very large values such as 9999px reliably produce pill shapes.
Popular shapes with border-radius
| Shape | CSS | Note |
|---|---|---|
| Circle | border-radius: 50% | Element must be square |
| Ellipse | border-radius: 50% | On a rectangle |
| Pill / capsule | border-radius: 9999px | Works at any width |
| Tab | border-radius: 12px 12px 0 0 | Rounded on top only |
| Leaf | border-radius: 0 70% | Two opposite corners |
| Drop / pin | border-radius: 50% 50% 50% 0 | Rotate 45° or -45° to point it |
| Egg | border-radius: 50% / 60% 60% 40% 40% | Taller than wide works best |
| Blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% | Animate between two blobs for a "morphing" effect |
Tip: to animate a morphing blob, put two different 8-value radii in @keyframes and let border-radius transition between them. Pair it with a soft shadow from the box shadow generator, then tidy your stylesheet with the CSS Formatter.
Frequently asked questions
How does the border-radius shorthand work?
With one value all four corners match. Two values set top-left and bottom-right, then top-right and bottom-left. Three values set top-left, then top-right and bottom-left, then bottom-right. Four values go clockwise from top-left: top-left, top-right, bottom-right, bottom-left.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, which makes each corner a quarter of an ellipse. For example border-radius: 50% / 30% gives every corner a 50% wide and 30% tall curve. This 8-value syntax is how CSS blob shapes are made.
Should I use px or % for border-radius?
Use px when you want the same visible rounding regardless of size, such as 8px on cards and buttons. Use % when the shape should scale with the element: 50% on a square makes a circle. Horizontal percentages are relative to the width and vertical ones to the height.
How do I make a perfect circle or pill?
For a circle use a square element (equal width and height) with border-radius: 50%. For a pill shape on an element of any width, use a pixel radius of at least half the height, often written as 9999px, so the ends stay fully round.
Why does my radius look smaller than the value I set?
When two adjacent radii add up to more than the length of that side, the browser scales all radii down by the same factor so the curves never overlap. The tool tells you when that happens.
How do I make a CSS blob shape?
Switch to Advanced mode with % units and give each corner different horizontal and vertical radii, keeping each pair along a side at 100% total for smooth curves, for example 30% 70% 70% 30% / 30% 30% 70% 70%. The Random blob button generates these for you.
Does border-radius clip the content inside?
It clips the element's background and border. Child elements and images can still poke out of the rounded corners; add overflow: hidden (or overflow: clip) to the element to clip its content too.