CSS Border Radius Generator
Set each corner of a box separately and, if you like, give every corner a different horizontal and vertical radius to make leaf, egg or blob shapes. The generator writes the shortest correct border-radius shorthand plus the four longhand properties, and previews the shape at the size you choose.
Build a CSS Border Radius
Preview
CSS
How to Use the Border Radius Generator
- Choose the unit and the preview size.
- Enter a radius for each corner.
- Tick Elliptical corners to set a separate vertical radius for each corner.
- Copy the shorthand or the longhand CSS.
About This Tool
Designers and developers styling cards, avatars, buttons, speech bubbles and organic blob shapes, and anyone who finds the slash syntax of elliptical radii confusing.
Input: Corner values · Output: CSS border-radius.
Features and Limitations
Features
- Collapses equal values into the shortest shorthand (one, two, three or four values).
- Elliptical radii written with the slash syntax: horizontal / vertical.
- Percent radii for shapes that scale with the element, e.g. 50% for a circle or ellipse.
- Warns when radii overlap and the browser will scale them down.
Limitations
- When adjacent radii add up to more than the side length, browsers scale all radii down proportionally, so the visible shape may be rounder or flatter than the numbers suggest; the tool warns about this.
- rem values are previewed with your browser's root font size.
- Results are computed in your browser; nothing you enter is sent to a server.
Example
Top-left 40, top-right 12, bottom-right 40, bottom-left 12 (px)
collapses to border-radius: 40px 12px;
Frequently Asked Questions
How do I make a circle?
Use a square element and border-radius: 50%. On a rectangle, 50% gives an ellipse.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, so 50% / 30% makes wide, shallow corners.
How do I make a pill-shaped button?
Use a very large length such as 999px. Because the browser scales overlapping radii down, the ends become perfect semicircles at any height.
Does border-radius clip the content?
Backgrounds and borders follow the curve, but child content only gets clipped if you also set overflow: hidden (or clip).
Related Tools
More like this: all CSS & Frontend tools, all Developer & Web tools or the TinySandy home page.