check_box_outline_blank

Border Radius Generator

Visually design and export precise CSS border-radius properties.

Viewport

drag_pan

codeGENERATED CSS

.custom-shape {
  width: 300px;
  height: 300px;
  border-radius: 24px;
  /* Legacy Browser Support */
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
}

Common Patterns

Leaf

100% 0 100% 0

Organic

30% 70% 70% 30% / 30% 30% 70% 70%

Shield

50% 50% 0 0

Wedge

0 100% 0 0

Technical Reference

Rounded Corners That Look Deliberate

Radius values and what they signal

Corner rounding is a design voice — the value you pick sets a tone:

Radius	Feel	Common use
0	Sharp, formal	Data tables, enterprise dashboards
4–8 px	Quietly modern	Buttons, inputs, cards — the safe default
12–16 px	Friendly	Cards and modals in consumer apps
24 px+	Playful, soft	Chat bubbles, pill buttons
50% / 9999 px	Circle / pill	Avatars, tags, toggle switches

Per-corner control and the squash trap

Each corner accepts its own value — tabs round only the top, dropdown panels only the bottom, speech bubbles leave one corner sharp. The classic mistake: a radius bigger than half the element's height turns rectangles into unintended pills, and nested elements (an image inside a rounded card) need a slightly smaller inner radius — matching radii look wrong because the gap between them isn't concentric.

Consistency beats creativity here

Pick two or three radius values for an entire project and reuse them — mixed 6, 9, 13 px corners read as sloppy even when nobody can say why. Pair the radius with a shadow for elevation, preview brand colors via the color picker, and keep units consistent with the px to rem converter.