CSS Border Radius Generator

How CSS border-radius works

border-radius accepts up to four values for the top-left, top-right, bottom-right, and bottom-left corners, in that order. Each corner can also take a second, elliptical radius after a slash — that's what turns plain rounded corners into the kind of asymmetric blob shape you'll see used for cards and badges around this site.

• Lock corners: keeps all four corners identical, which is what you want for buttons, inputs, and most cards.
• Unlocked: set each corner's horizontal and vertical radius independently for hand-drawn, organic shapes.
• px vs %: px gives a fixed radius regardless of size; % scales with the element, so 50% always yields a circle or pill shape.

Large radii are automatically clamped by the browser once they'd overlap — you never need to do that math by hand, just push the sliders and copy whatever looks right.