CSS Border Radius Generator (Organic Shapes)

What is Border Radius?

CSS border-radius rounds an element's corners — from sharp squares to perfect circles or organic blobs. Syntax:

/* 1 value: all corners equal */
border-radius: 12px;

/* 4 values: TL TR BR BL (clockwise from top-left) */
border-radius: 12px 24px 12px 24px;

/* 8 values: X / Y separately → organic shapes */
border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%;

When to use which value?

• 0px (square): Brutalist UI, table cells, technical interfaces.
• 4-8px (soft): inputs, small buttons — modern but not too soft.
• 12-16px (medium): cards, modals — the most common today.
• 24-32px (large): hero banners, feature cards — friendly look.
• 9999px (pill): badges, "Subscribe" buttons — capsule shape.
• 50%: avatars, circular icon buttons.
• Organic blob: decorative hero shapes, illustrations — on-trend 2024-2026.

Tips

• Consistent radius: use 1-2 values across the whole site (e.g. 8px for inputs, 12px for cards). Tailwind ships with a scale: rounded-sm/md/lg/xl/2xl/3xl/full.
• Inside vs outside radius: a parent with 8px padding and 12px border-radius needs a 4px (12-8) child radius to stay aligned.
• Performance: border-radius is GPU-accelerated and essentially free.
• Organic blob caveat: if width ≠ height, the blob distorts. Use aspect-ratio: 1 to keep it square.

Related

• Box Shadow Generator — pair with radius for depth
• CSS Clip-path Generator — crop into any shape
• Gradient Generator — beautiful backgrounds
• CSS Unit Converter — px ↔ rem
• All tools