Border Radius Generator

What is border-radius?

border-radius rounds the corners of an element. Instead of applying a uniform radius, CSS lets you define up to four values — one per corner — so a box can look nearly square on one side and fully rounded on the other.

How do the four values work?

The order is clockwise starting from the top-left corner: top-left, top-right, bottom-right, bottom-left. When every corner shares the same value, the shorthand border-radius: 20px is enough; otherwise all four values are written in order.

What can rounded corners be used for?

• Buttons, chips and badges with a soft pill look.
• Cards and modals that feel friendlier than sharp rectangles.
• Avatars that need a perfect circle by setting half the size.
• Input fields and tags with a consistent radius.

Should the radius be small or large?

Small radii (2–8px) look subtle and professional; large radii (16–40px) feel rounded and playful. As a rule of thumb, keep the radius clearly smaller than the element — a radius larger than half the box simply produces a pill shape.

Is the generated CSS minimal?

Yes. When the corners are linked, the tool writes the short form with a single value. As soon as any corner differs, it switches to four explicit values, so the output stays minimal and readable.