Tools · CSS · Border-radius generator · Guides
Border-radius generator guides
Three short reads: why this matters, how to do it, and one specific way to use it.
Why Every Rounded Corner Looks the Same (and How Blob Shapes Fix It)
The same 8px or 12px radius on every card, button and image is efficient and instantly forgettable. border-radius can do far more than round a rectangle's corners evenly.
Read the guideHow to Round Corners and Build CSS Blob Shapes
Simple mode for a clean rectangle, circle or pill. Blob mode for an organic, asymmetric shape. The exact controls for both, and what the generated CSS actually contains.
Read the guideCircle, Pill or Blob: Picking the Right border-radius
An avatar circle, a pill button and an organic background shape all use border-radius, with three different settings: 50% on a square, a px radius of half the height, eight percentages.
Read the guide