CSS Border Radius Generator
Generate CSS border-radius with independent corners, elliptical X/Y radii, px or % units and blob presets. Outputs the shortest valid shorthand.
Presets
Corners
Preview settings
Preview
border-radius: 16px;
Related Tools
View AllWhat is Border Radius Generator?
Set the radius of each corner separately, optionally with different horizontal and vertical radii for elliptical corners, in px or %. The tool previews the shape and writes the shortest equivalent border-radius shorthand.
How to use Border Radius Generator
- Pick a preset (Rounded, Pill, Circle, Blob, Leaf, Ticket) or set values yourself.
- Choose the Unit (px or %) and enable Elliptical corners if you want separate X/Y radii.
- Adjust each corner (Top left, Top right, Bottom right, Bottom left); tick Link all corners to change them together.
- Change width, height and color under Preview settings to see the shape at your size.
- Copy the CSS code.
Example
Unit %, elliptical: top-left 30/30, top-right 70/30, bottom-right 70/70, bottom-left 30/70
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
When to use Border Radius Generator
Use it for rounded cards, pills, avatars and organic blob shapes made purely with CSS. Percentages scale with the element (50% on a square gives a circle). For arbitrary polygons or shapes with straight cuts use the Clip Path Generator; for complex organic shapes with many points use the SVG Blob Generator.
How Border Radius Generator works
Corners are ordered top-left, top-right, bottom-right, bottom-left, as CSS requires. Each group of four values is shortened with the standard shorthand rules: the fourth value is dropped when equal to the second, the third when equal to the first, and the second when equal to the first. With elliptical corners the vertical radii follow a slash (h / v); the slash part is omitted when every vertical radius equals its horizontal radius.
Common Use Cases
- Pill-shaped buttons and tags
- Circular avatars
- Organic blob images with 8-value elliptical radii
- Ticket or leaf-shaped cards
- Asymmetric speech-bubble corners
FAQs
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, which produce elliptical corners.
Why does 999px make a pill shape?
When radii are larger than the box, browsers scale all of them down proportionally, so a huge value always gives perfectly round ends.
Should I use px or %?
px keeps the same curve at any size; % is relative to the element's width (horizontal) and height (vertical), which is what you want for circles and blobs.