CSS Border Radius Generator
Create everything from slightly rounded buttons to organic blobs using the full power of CSS3 border-radius.
100% Free — No registration required.
border-radius: 20px; Common Use Cases
Where border-radius makes the biggest impact in UI design
Buttons & CTAs
Rounded buttons feel more clickable and modern. From subtle 4px to fully rounded pill buttons.
Avatar Images
Circular avatars using 50% radius are standard in modern UI. Square images become circles instantly.
Cards & Containers
Rounded cards feel softer and more approachable. Standard values: 8px, 12px, or 16px.
Blob Backgrounds
Organic blob shapes for hero sections, decorative elements, and modern landing pages.
Understanding CSS Border Radius
The border-radius property rounds the corners of an element's outer border edge. While most people use simple values like 10px, CSS allows incredibly powerful 8-value syntax that can create organic, asymmetric shapes.
Value Syntax Options
- 1 value:
border-radius: 10px;— All four corners equal - 2 values:
border-radius: 10px 20px;— Top-left/bottom-right, top-right/bottom-left - 4 values:
border-radius: 10px 20px 30px 40px;— Clockwise from top-left - 8 values:
border-radius: a b c d / e f g h;— Horizontal / Vertical radii independently
The Blob Secret: 8-Value Syntax
By separating horizontal and vertical radii with a slash (/), you create asymmetric curves at each corner. This is how modern blob shapes are made — no SVG required!
CSS Syntax & Examples
Copy-paste ready code examples for different border-radius styles
/* Uniform rounded corners */
.card {
border-radius: 12px;
}
/* Pill button */
.pill-button {
border-radius: 9999px;
}
/* Perfect circle */
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
}
/* Specific corners (TL, TR, BR, BL) */
.custom {
border-radius: 20px 8px 20px 8px;
}/* Basic blob */
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
/* Smooth organic shape */
.organic {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
/* Animated blob */
.animated-blob {
animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
50% {
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
}
}Frequently Asked Questions
What's the difference between 4-value and 8-value syntax?
4-value sets the radius for each corner (top-left, top-right, bottom-right, bottom-left). 8-value separates horizontal and vertical radii with a slash, allowing asymmetric organic shapes.
How do I create a perfect circle?
Set border-radius: 50% on a square element (equal width and height). For pill/capsule shapes, use border-radius: 9999px.
Can I use percentages?
Yes! Percentages are calculated relative to the element's dimensions. Horizontal percentages use width, vertical percentages use height. This is how blob shapes work.
What are blob shapes used for?
Blob shapes are popular for hero backgrounds, decorative elements, abstract art, and adding organic, friendly feeling to rigid layouts. No SVG or images needed!