Border-radius is a CSS property that rounds the corners of elements. Higher values create more rounded corners, and maximum values can create circles or pills.

Set all four corners to 50% (or 50px on a 100px square). The element must have equal width and height to appear as a true circle.

Pixels give fixed rounding regardless of element size. Percentages scale with the element – 50% always creates maximum rounding relative to dimensions.

Asymmetric corners create unique shapes: chat bubbles, tabs, buttons with accent corners, or organic blob effects for creative designs.

Linked mode adjusts all corners together for uniform rounding. Unlinked mode lets you set each corner independently for custom shapes.

Absolutely! Apply border-radius to images to create rounded photos, circular avatars, or shaped image frames. Combine with object-fit for best results.

Single value (border-radius: 10px) applies to all corners. Four values go clockwise: top-left, top-right, bottom-right, bottom-left.

Use 100px or more (any value larger than half the element's shorter side). This creates fully rounded ends, perfect for buttons and tags.

Yes! When you have a border, the border-radius curves along with it. The inner radius is calculated automatically based on border width.

Yes. Border-radius has excellent browser support across all modern browsers with no prefixes needed.