Gliora
Tools

Money

Housing & transport

Life

Tools

Español

CSS border-radius generator

CSS border-radius generator

This CSS border-radius generator lets you round each corner of a box visually and copy the finished border-radius declaration.

Round corners without doing the math

Adjust the four corner values and watch the preview box update instantly, then copy the generated CSS straight into your stylesheet. Everything runs in your browser.

FAQ

Can I set each corner independently?
Yes. Enter a separate pixel value for the top-left, top-right, bottom-right and bottom-left corners and the preview updates live.
What CSS does this generate?
A single border-radius declaration with four values in the standard order (top-left, top-right, bottom-right, bottom-left), e.g. border-radius: 16px 8px 16px 8px;
What value makes a fully rounded circle?
Set all four corners to a value at least half the element's width and height (or use 50% in your own CSS) to get a circle or pill shape.