CSS Border Radius Generator

CSS Border Radius Generator rounds the corners of a box and writes the border-radius you need. Set one radius for every corner, or each corner separately, in pixels or as a percentage of the box. Turn on elliptical corners to give each corner a different horizontal and vertical radius — the slash syntax of border-radius — which is how organic blob shapes, leaves and eggs are made in CSS without an image. Presets give a rounded card, a pill, a circle, a leaf, a blob and a speech bubble. The CSS is written in the shortest form that means the same thing: one value when all corners match, two when opposite corners match, three or four only when needed, and the slash part only when the vertical radii differ from the horizontal.

1. Pick a preset or start with the rounded card.
2. Choose pixels or percent, and whether all corners share a radius.
3. Drag the sliders; switch on elliptical corners for blob shapes.
4. Copy the CSS.

• Percentages are of the box’s own width (horizontal) and height (vertical), so a percentage radius changes shape with the box’s proportions.
• When two corners’ radii add up to more than the side, browsers scale all radii down evenly; a 9999px pill works because of that rule.
• A border-radius clips the box’s background and border, but its content overflows unless the box also has overflow: hidden.
• The newer corner-shape property (squircles, bevels) is not yet in most browsers and is not offered.
• Everything happens in your browser and nothing is sent.

Give a square box border-radius: 50%. On a rectangle the same value makes an ellipse.

Use a radius much larger than the button’s height, such as 9999px; the browser limits it to half the height, giving perfectly round ends at any size.

Values before it are the horizontal radii and after it the vertical ones, so each corner becomes a quarter of an ellipse.

When corners match, fewer values mean the same: 8px 4px 8px 4px is written 8px 4px.