Border Radius Generator: Craft Custom Rounded Shapes for Modern UI

border-radius: 8px is fine for cards. But modern UI demands more — pill shapes, organic blobs, asymmetric curves, and custom corner radii. A visual generator lets you drag each corner independently and see the result instantly, creating shapes that would take trial-and-error to code by hand.

What Is Border Radius Generator?

A border radius generator provides a visual interface where you drag each of the four corners (or eight values for the advanced shorthand) to create custom rounded shapes. You see a live preview of the shape and get the CSS — from simple border-radius: 12px to complex border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% for organic forms.

How to Use Border Radius Generator on DevToolHub

1. Open the Border Radius Generator tool on DevToolHub — no signup required.
2. Start with a square preview element.
3. Drag corner handles to set individual corner radii.
4. Toggle advanced mode for the 8-value shorthand (horizontal/vertical radii per corner).
5. Preview the shape against different backgrounds and sizes.
6. Copy the generated CSS border-radius value.

Pill-Shaped Buttons

The classic fully-rounded button:

border-radius: 9999px;

/* Applied to a button */
.btn-pill {
  padding: 10px 28px;
  border-radius: 9999px;
  background: #6C5CE7;
  color: white;
  border: none;
}

Using 9999px instead of 50% ensures the pill shape works regardless of element dimensions.

Organic Blob Shapes

Create natural, asymmetric shapes:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

/* Blob avatar */
.avatar-blob {
  width: 200px;
  height: 200px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  overflow: hidden;
}

The 8-value shorthand sets horizontal and vertical radii separately for each corner, creating organic curves impossible with simple values.

Card with Different Corner Sizes

Asymmetric corners for visual hierarchy:

/* Top corners rounded, bottom sharp */
border-radius: 24px 24px 4px 4px;

/* Only top-left and bottom-right */
border-radius: 20px 0 20px 0;

/* Notification badge overlap */
.card {
  border-radius: 16px;
}
.card .badge {
  border-radius: 0 16px 0 8px;
  position: absolute;
  top: 0;
  right: 0;
}

Individual corner control lets you match rounded edges where elements meet — badges, tabs, and overlapping cards.

Pro Tips

• Use CSS custom properties — define --radius-sm: 8px, --radius-md: 16px, --radius-lg: 24px for consistent design tokens.
• Match border-radius to padding — a card with 16px padding looks best with 12-16px border radius.
• Use overflow: hidden — child content can escape rounded containers; clip it with overflow.
• Animate radius — border-radius is animatable; transition between shapes for hover effects.

When You Need This

• Designing buttons, badges, and tags with the right roundness
• Creating organic blob backgrounds for hero sections
• Building card components with consistent corner treatment
• Experimenting with unconventional shapes for avatars and decorative elements