Border Radius Generator

Link all four corners or control each one independently. Choose px, %, or rem units and see the shape update as you drag. Copy the CSS when you're happy with it.

Drag the sliders to shape corners. Link them for uniform radius or unlink to set each corner independently.

Unit

Link all corners

All corners12px

CSS

border-radius: 12px;

How it works

Start with all corners linked for a uniform radius. Uncheck 'Link all corners' to set top-left, top-right, bottom-right, and bottom-left independently. Switch between px, %, and rem units depending on your needs. The preview shape updates in real time so you can fine-tune the curve before copying the CSS.

When you'd use this

Rounding card corners in a design system. Creating pill-shaped buttons (set radius to 50% or a large px value). Making asymmetric shapes like chat bubbles or tab indicators where only some corners are rounded. Quickly testing how different radius values look before writing CSS by hand.

Border radius shorthand

When all four corners are the same, CSS only needs one value: border-radius: 12px. When they differ, the shorthand lists them clockwise from top-left: border-radius: 12px 8px 0 4px. Setting border-radius to 50% on a square element creates a circle. On a rectangle, 50% creates an ellipse. Using rem units keeps your rounding proportional to the base font size.