CSS Border Radius Generator
Create any border-radius visually: drag the corner handles or set each corner exactly, link or unlink the four corners, switch to elliptical radii for blob and egg shapes, work in px or %, and copy the shortest valid border-radius CSS.
This tool runs entirely in your browser.
How to use the CSS Border Radius Generator
- 1Drag a white handle along the edge of the preview to round that corner, or use the sliders and number boxes.
- 2Untick “Link all corners” to set each corner separately.
- 3Turn on elliptical corners to set horizontal and vertical radii independently — handles appear on both edges of each corner.
- 4Pick px or %, try a preset like Blob or Leaf, then copy the CSS.
What is the CSS Border Radius Generator?
border-radius sets the curve of each corner in the order top-left, top-right, bottom-right, bottom-left. One value rounds all four; two values set the diagonals; three or four set corners individually. A slash separates horizontal radii from vertical ones, so border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% gives each corner an elliptical curve — the trick behind organic blob shapes.
Percentages are relative to the box: horizontal radii to its width and vertical radii to its height, which is why 50% makes a circle from a square and an ellipse from a rectangle. When adjacent radii add up to more than the side length, the browser scales all of them down proportionally; that’s why a huge value like 9999px makes a perfect pill.
Frequently asked questions
How do I make a pill-shaped button?
Use a length larger than half the button’s height, such as border-radius: 9999px. Unlike 50%, it keeps the sides straight and the ends perfectly round at any width.
What does the slash in border-radius mean?
Values before the slash are the horizontal radii and values after it the vertical radii of each corner, so every corner can be a quarter-ellipse rather than a quarter-circle.
Why does the generated CSS have fewer values than corners?
The tool writes the shortest equivalent form: four equal corners become one value, matching diagonals become two, and a matching top-right and bottom-left become three — exactly how the shorthand expands back.
Is the CSS Border Radius Generator free and private?
Yes. The CSS Border Radius Generator is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.
Related tools
All developer tools →- CSS Box Shadow GeneratorLayer CSS box-shadows visually and copy the code.
- CSS Clip-Path GeneratorDraw clip-path polygons, circles and insets.
- CSS Gradient GeneratorCreate linear and radial CSS gradients.
- CSS Unit VisualizerSee px, %, em, rem, vw, vh, ch and ex side by side.
- CSS Flexbox PlaygroundBuild flexbox layouts visually and copy the CSS.
- JSON FormatterFormat and beautify JSON online.