CSS Border Radius: 15 Copy-Paste Examples

CSS border-radius is one of the most versatile properties in modern web design. Beyond standard rounded corners on cards and buttons, the CSS border-radius specification supports asymmetrical corners, percentage scaling, and 8-value organic blob shapes.

Here are 15 ready-to-use CSS border radius examples you can copy and paste directly into your stylesheets or UI components.

1. Standard Card Corners

/* Modern subtle rounded card */
.card {
  border-radius: 12px;
}

2. Extra-Soft Pill Button

/* Fully rounded pill button */
.btn-pill {
  border-radius: 9999px;
  padding: 10px 24px;
}

3. Perfect Circle (Avatars / Icons)

/* Element must have equal width and height */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

4. Diagonal Rounded Corners (Modern Badge)

/* Top-left and bottom-right rounded only */
.diagonal-badge {
  border-radius: 20px 0 20px 0;
}

5. Chat Bubble (Left Tail)

/* Speech bubble with pointed bottom-left corner */
.chat-bubble {
  border-radius: 18px 18px 18px 0px;
}

6. Organic Blob Shape (8-Value Syntax)

/* Fluid organic shape */
.blob-shape {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

7. Smooth Organic Egg Shape

/* Smooth egg / pebble shape */
.egg {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

8. Tab Navigation Top Corners

/* Rounded top edge for browser-style tabs */
.tab-item {
  border-radius: 8px 8px 0 0;
}

9. Leaf / Petal Shape

/* Pointed opposite corners creating a leaf */
.leaf {
  border-radius: 0 40px 0 40px;
}

10. Asymmetrical Hero Card

/* Distinctive asymmetrical landing hero */
.hero-card {
  border-radius: 32px 8px 32px 8px;
}

11. Rounded Triangle / Teardrop

/* Teardrop indicator */
.teardrop {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

12. Floating Action Button (Squircle)

/* iOS-style super-ellipse / squircle effect */
.squircle {
  border-radius: 35%;
}

13. Bottom Sheet Modal

/* Mobile slide-up modal with rounded top */
.bottom-sheet {
  border-radius: 24px 24px 0 0;
}

14. Ticket Coupon (Inward effect pairing)

/* Corner badge */
.ticket-header {
  border-radius: 16px 16px 4px 4px;
}

15. Morphing Blob (Animation Ready)

/* Keyframe-friendly organic blob */
.morph-blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-radius 0.5s ease;
}

Frequently asked questions

Tools mentioned