CSS Border Radius Generator

Round the corners of a box one by one or all together, switch to elliptical corners for organic blob shapes, and copy the shortest border-radius CSS.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS

How to use the Border Radius Generator

  1. Choose the Unit. Leave Same for all corners ticked for even corners, or untick it to set Top left, Top right, Bottom right, and Bottom left separately.
  2. Tick Elliptical corners to give each corner a separate vertical radius, or try the Blob preset.
  3. Press Copy CSS.

How it works

  • border-radius lists corners clockwise from the top left: top-left, top-right, bottom-right, bottom-left.
  • The output uses the shortest form: one value when all corners match, two when opposite corners match.
  • With a slash, a b c d / e f g h, the values before the slash are horizontal radii and the ones after are vertical, which makes elliptical corners.
  • Percentages are relative to the box's width (horizontal) and height (vertical), so 50% on a square makes a circle.

Examples

  • All corners 24px: border-radius: 24px;
  • Leaf preset: border-radius: 0 80px; (top-left and bottom-right square).
  • Blob preset: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  • Pill buttons: a very large value such as 999px always gives fully round ends.

Limitations

  • When radii add up to more than the box size, browsers scale them all down to fit, so very large values can look the same.
  • Child elements with a background can poke out of rounded corners; add overflow: hidden to the parent.

Frequently asked questions

How do I make a circle with border-radius?

Give a square element border-radius: 50%.

What does the slash in border-radius mean?

It separates horizontal radii from vertical radii. 40px / 20px makes each corner an ellipse 40px wide and 20px tall.

px or % for border-radius?

px keeps the same curve at any size, which suits buttons and cards. % scales with the element, which suits circles and blob shapes.

Is anything uploaded?

No. The CSS is built in your browser.

Often used together with the Border Radius Generator.