CSS Border Radius Generator

About CSS Border Radius

The border-radius property rounds the corners of an element's border. You can set all corners equally, each corner individually, or even create elliptical corners.

Syntax

• border-radius: 10px; — all corners equal
• border-radius: 10px 20px; — top-left/bottom-right, top-right/bottom-left
• border-radius: 10px 20px 30px 40px; — TL, TR, BR, BL
• border-radius: 50%; — perfect circle (on a square element)

FAQ

How do I make a perfect circle?

Set border-radius: 50% on a square element (equal width and height). For a non-square element, 50% creates an ellipse, which can also be useful.

What's the difference between px and % for border-radius?

Pixel values give fixed radii regardless of element size. Percentage values are relative to the element's dimensions — 50% always creates the maximum rounding (circle/ellipse), while a large px value may not fully round a large element.