CSS Border Radius Generator

Round each corner of an element and copy the border-radius CSS.

What does border-radius do?

The CSS border-radius property rounds the corners of an element. One value rounds all corners equally; four values set top-left, top-right, bottom-right and bottom-left separately.

Examples

border-radius: 8px; — slightly rounded cards and buttons.
border-radius: 999px; — pill-shaped buttons.
border-radius: 50%; — a circle (on a square element).
border-radius: 20px 20px 0 0; — only the top corners rounded.

The generator outputs the shortest valid CSS: one value when all corners are equal, otherwise four values in clockwise order starting top-left.

Frequently asked questions

How do I make a circle?

Give a square element border-radius: 50%.

px or %?

px keeps corners the same on any size; % scales with the element, which is useful for circles and ellipses.

Does border-radius clip images inside?

Add overflow: hidden to the element so its content follows the rounded corners.