Last updated
Border Radius Quick Reference
border-radius: 4px— subtle rounding, modern minimal styleborder-radius: 8px— standard card roundingborder-radius: 50%— circle (on square elements)border-radius: 9999px— pill shape (any aspect ratio)border-radius: 8px 8px 0 0— tab shape (rounded top only)border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%— organic blob
The CSS Border Radius Generator on TechConverter.me provides a visual interface with draggable handles for each corner. Adjust the values, see the shape update in real time, and copy the generated CSS directly into your stylesheet.
Examples
Example 1: Common Border Radius Values
The most frequently used border-radius values in modern web design:
/* Subtle rounding — modern card style */
.card {
border-radius: 8px;
}
/* Medium rounding — panels and modals */
.modal {
border-radius: 12px;
}
/* Heavy rounding — pill buttons */
.btn-pill {
border-radius: 9999px; /* or 50px — any value larger than half the height */
}
/* Perfect circle — avatar images */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
/* No rounding — sharp corners */
.sharp {
border-radius: 0;
}
Example 2: Individual Corner Control
Setting different radius values for each corner:
/* Shorthand: top-left, top-right, bottom-right, bottom-left */
.asymmetric {
border-radius: 16px 4px 16px 4px; /* diagonal corners match */
}
/* Tab shape — rounded top, flat bottom */
.tab {
border-radius: 8px 8px 0 0;
}
/* Rounded bottom only */
.bottom-rounded {
border-radius: 0 0 16px 16px;
}
/* Single corner rounded */
.corner-accent {
border-radius: 0 0 0 24px; /* only bottom-left rounded */
}
/* Ticket shape */
.ticket {
border-radius: 4px 4px 4px 4px;
/* with notch effect using pseudo-elements */
}
Example 3: Elliptical Corners (Slash Syntax)
The slash syntax allows different horizontal and vertical radii for each corner, creating elliptical curves:
/* Elliptical corners — horizontal / vertical radii */
.elliptical {
border-radius: 50% / 20%;
/* Creates a wide, flat oval shape */
}
/* Egg shape */
.egg {
width: 200px;
height: 280px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* Leaf shape */
.leaf {
width: 200px;
height: 200px;
border-radius: 0 100% 0 100%;
}
/* Teardrop */
.teardrop {
width: 100px;
height: 120px;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
}