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 - 3 values:
border-radius: 10px 20px 30px;— Top-left, top-right/bottom-left, bottom-right - 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%;
}
}/* Individual corner properties */
.element {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 10px;
}
/* Asymmetric corner (horizontal/vertical) */
.asymmetric {
border-top-left-radius: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
/* Only top corners rounded */
.top-rounded {
border-radius: 12px 12px 0 0;
}<!-- Preset sizes -->
<div class="rounded-sm"></div> <!-- 2px -->
<div class="rounded-md"></div> <!-- 6px -->
<div class="rounded-lg"></div> <!-- 8px -->
<div class="rounded-xl"></div> <!-- 12px -->
<div class="rounded-2xl"></div> <!-- 16px -->
<div class="rounded-full"></div><!-- 9999px -->
<!-- Individual corners -->
<div class="rounded-t-lg rounded-b-none"></div>
<div class="rounded-tl-xl rounded-br-xl"></div>
<!-- Arbitrary values -->
<div class="rounded-[20px_8px_20px_8px]"></div>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 — asymmetric % values create organic curves.
What are blob shapes used for?
Blob shapes are popular in modern web design for hero backgrounds, decorative elements, abstract art, and adding organic, friendly feeling to otherwise rigid layouts. No SVG or images needed!
Can I animate border-radius?
Yes! Border-radius is animatable. You can create morphing blob animations by transitioning between different 8-value configurations using CSS keyframes or JavaScript.
Is there a maximum border-radius value?
No hard limit, but values beyond 50% for both axes start overlapping and get clamped by the browser. For reliable circles, always use 50%. For pill shapes, use very large values like 9999px.