Border Radius Generator
Set border-radius for each corner with sliders and live preview.
Drag the sliders to shape corners. Link them for uniform radius or unlink to set each corner independently.
border-radius: 12px;About 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.
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.