CSS border-radius is a property that rounds the corners of an element's outer border edge. It accepts values in pixels, percentages, or other CSS length units, and can create anything from subtle rounded corners to perfect circles.
Quick Reference
| Shape | CSS |
|---|---|
| Slight rounding | border-radius: 4px; |
| Moderate rounding | border-radius: 8px; |
| Heavy rounding | border-radius: 16px; |
| Circle (square element) | border-radius: 50%; |
| Pill / Stadium | border-radius: 9999px; |
| Top corners only | border-radius: 12px 12px 0 0; |
| Left corners only | border-radius: 12px 0 0 12px; |
Syntax
The border-radius property is shorthand for four individual corner properties:
/* Longhand */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* Shorthand (all corners) */
border-radius: 10px;
/* Shorthand (top-left/bottom-right, top-right/bottom-left) */
border-radius: 10px 20px;
/* Shorthand (top-left, top-right/bottom-left, bottom-right) */
border-radius: 10px 20px 30px;
/* Shorthand (clockwise: TL, TR, BR, BL) */
border-radius: 10px 20px 30px 40px;
The order follows the CSS standard: clockwise from top-left.
Creating Common Shapes
Rounded Corners
For subtle, modern UI elements, use small pixel values:
.card {
border-radius: 8px;
}
.button {
border-radius: 4px;
}
These values are small enough to soften edges without dramatically changing the shape.
Circle
To create a perfect circle, apply border-radius: 50% to a square element:
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
If the element is not square, 50% creates an ellipse instead.
Pill Shape (Stadium)
For pill-shaped buttons or tags, use a very large value:
.pill-button {
border-radius: 9999px;
}
The large value ensures the ends are fully rounded regardless of the element's height. Using a huge value like 9999px is more robust than calculating the exact half-height.
Top Rounded Only (Tabs, Headers)
Round only the top corners for tab-like elements:
.tab {
border-radius: 8px 8px 0 0;
}
One Corner
Round a single corner for decorative effects:
.corner-accent {
border-radius: 0 0 20px 0; /* Only bottom-right */
}
Percentages vs Pixels
| Unit | Behavior |
|---|---|
px |
Fixed radius in pixels. Same curve on any element size. |
% |
Relative to element dimensions. Creates elliptical curves on non-square elements. |
em/rem |
Scales with font size. Useful for typography-relative components. |
Key difference: On a 200×100px rectangle, border-radius: 50% produces a 100px horizontal radius and 50px vertical radius — an ellipse. Use pixels when you want consistent circular curves on rectangles.
Elliptical Corners
Border-radius supports separate horizontal and vertical radii using a slash:
/* Horizontal radius / Vertical radius */
border-radius: 20px / 40px;
/* Different for each corner */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
This creates elliptical curves where the horizontal and vertical curvatures differ.
Use case: Subtle, organic-looking shapes for decorative backgrounds or custom illustrations.
Common Patterns
Card with Rounded Corners
.card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 24px;
}
Circular Profile Picture
.profile-picture {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover; /* Prevents image distortion */
}
Pill Button
.pill-button {
padding: 8px 24px;
border-radius: 9999px;
background: #3b82f6;
color: white;
border: none;
}
Chat Bubble
.chat-bubble {
background: #e5e7eb;
padding: 12px 16px;
border-radius: 18px 18px 18px 4px; /* Flat bottom-left corner */
max-width: 300px;
}
.chat-bubble.sent {
background: #3b82f6;
color: white;
border-radius: 18px 18px 4px 18px; /* Flat bottom-right corner */
}
Browser Support
Border-radius is supported in all modern browsers with no prefix required:
- Chrome 4+
- Firefox 4+
- Safari 5+
- Edge 12+
- Opera 10.5+
- iOS Safari 4+
- Android Browser 2.1+
Vendor prefixes (-webkit-border-radius, -moz-border-radius) were needed before 2011 but are obsolete today.
Common Pitfalls
1. Expecting Circles on Rectangles
/* This creates an ellipse, not a circle */
.rectangle {
width: 200px;
height: 100px;
border-radius: 50%;
}
Solution: Use pixel values or ensure the element is square.
2. Clipping Child Content
Large border-radius values can clip child elements that extend to corners.
.container {
border-radius: 20px;
overflow: hidden; /* Clips children to rounded boundary */
}
3. Invisible Radius on Inline Elements
Border-radius has no visible effect on elements with display: inline by default (unless they have background/border).
/* Won't show radius */
span { border-radius: 8px; }
/* Will show radius */
span { border-radius: 8px; background: yellow; }
4. Forgetting Object-Fit on Images
Circular images can distort if the image aspect ratio doesn't match:
.circular-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* Prevents distortion */
}
Animating Border-Radius
Border-radius can transition smoothly:
.shape {
border-radius: 8px;
transition: border-radius 0.3s ease;
}
.shape:hover {
border-radius: 50%;
}
This creates morphing effects useful for interactive elements.
Design System Recommendations
Many design systems define a scale of radius values:
| Token | Value | Use Case |
|---|---|---|
--radius-sm |
4px | Inputs, small buttons |
--radius-md |
8px | Cards, medium buttons |
--radius-lg |
12px | Modals, large cards |
--radius-xl |
16px | Hero sections |
--radius-full |
9999px | Pills, avatars |
Using consistent values improves visual coherence across a UI.
Related Tools
Use our Border Radius Generator to visually design CSS border-radius values. Preview shapes in real-time and copy the generated CSS code.
FAQ
How do I make a circle with CSS border-radius?
Set border-radius to 50% on a square element (equal width and height). Example: width: 100px; height: 100px; border-radius: 50%;
What is the difference between border-radius: 50% and border-radius: 100%?
For creating circles, both work identically on square elements. The radius is capped at the maximum that still produces a curve — on a 100×100px square, 50% (50px) and 100% (100px) both create a perfect circle because the maximum meaningful radius is half the side length.
How do I create a pill-shaped button?
Set border-radius to a very large value like 9999px or 999em. This creates fully rounded ends regardless of the element's dimensions. Example: border-radius: 9999px;
Can I have different radii for each corner?
Yes. Use four values in clockwise order: top-left, top-right, bottom-right, bottom-left. Example: border-radius: 10px 20px 30px 40px;
What does border-radius: 10px / 20px mean?
The slash separates horizontal and vertical radii, creating elliptical curves. 10px is the horizontal radius, 20px is the vertical radius. This creates a vertically-stretched curve.
Does border-radius work on images?
Yes. Apply border-radius directly to the img element or its container. For circular images, use border-radius: 50% on a square image or container with overflow: hidden.
What units can I use with border-radius?
Any CSS length unit: px, %, em, rem, vw, vh, etc. Percentages are relative to the element's dimensions — 50% on a 200×100px element gives 100px horizontal and 50px vertical radii.
How do I round only the top corners?
Use border-radius: 20px 20px 0 0; — this applies 20px to top-left and top-right, and 0 to bottom-right and bottom-left.
Why doesn't my border-radius look right on a rectangle?
On non-square elements, percentage values create elliptical curves because the radius is calculated separately for width and height. Use pixel values for consistent circular curves on rectangles.
Is border-radius supported in all browsers?
Yes. Border-radius has full support in all modern browsers since 2011. No vendor prefixes (-webkit-, -moz-) are needed anymore.
Can border-radius animate?
Yes. Border-radius can be animated with CSS transitions or keyframe animations. Example: transition: border-radius 0.3s ease;
What is the maximum border-radius value?
There is no maximum, but values beyond half the element's smallest dimension have no additional visual effect. A 100×50px rectangle looks identical with border-radius: 25px and border-radius: 9999px.