CSS Border Radius Generator

CSS Border Radius Generator

Drag a slider for each corner – or link them to change all four at once – and copy the border-radius declaration. Presets create the most requested shapes in one click: rounded card, pill button, circle, leaf, egg, and speech bubble.

How the shorthand works

border-radius accepts one to four values, starting at the top-left corner and moving clockwise:

The generator always prints the shortest form that produces your shape.

Elliptical corners

Turn on Elliptical corners to set a separate vertical radius. The value then gets a slash: horizontal radii before it, vertical radii after it – for example 50% / 60% 60% 40% 40%, which turns a rectangle into an egg. This is also the trick behind CSS-only blob shapes.

px, %, or rem?

• px keeps the same curve on every element size – best for buttons and cards.
• % is relative to the element's width and height. 50% on a square makes a perfect circle; on a rectangle it makes an ellipse.
• rem scales with the root font size, so corners grow with the user's text settings.

For a pill button, use a large pixel value such as 999px; browsers cap the radius at half of the shorter side, so the ends are always perfectly round.

Vendor prefixes

All current browsers support the unprefixed property. The optional -webkit- and -moz- lines are only useful for very old Android and Firefox versions.