The CSS border-radius property
The CSS border-radius property rounds the corners of an element, e.g. border-radius: 8px. One value rounds all four corners; border-radius: 50% turns a square into a circle. It works whether or not the element has a visible border, and it also clips the background and any box shadow to the rounded shape.
Overview
border-radius rounds the corners of an element's box. Despite the name it has nothing to do with whether a border is visible — it rounds the background, the border (if any) and the corners of a box shadow alike.
A single value rounds all four corners equally, which covers the vast majority of buttons and cards. Like the other box shorthands you can pass more values to target corners individually, going clockwise from the top-left. And the well-known trick: border-radius: 50% on a square element makes a perfect circle, which is how avatars and round icon buttons are made.
For softer, more organic shapes you can give each corner two radii separated by a slash, producing an ellipse rather than a quarter-circle. You rarely need that, but it is there when a design calls for a gentler curve than the standard rounded corner.
Syntax
selector {
border-radius: value;
}
/* a circle */
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
}Values
The border-radius property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
8px |
Rounds all four corners by the same amount. The everyday case. |
50% |
Turns a square into a circle (or a rectangle into an ellipse). |
12px 4px |
Two values: top-left and bottom-right, then top-right and bottom-left. |
10px 20px 30px 40px |
Four values, one per corner, clockwise from the top-left. |
10px / 20px |
A slash gives horizontal and vertical radii for elliptical corners. |
Example
<style>
.row { display: flex; gap: 16px; justify-content: center; padding: 16px; font: 600 13px system-ui, sans-serif; }
.row div { width: 84px; height: 84px; background: #1c7ce9; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.r1 { border-radius: 8px; }
.r2 { border-radius: 50%; }
.r3 { border-radius: 24px 4px; }
</style>
<div class="row">
<div class="r1">8px</div>
<div class="r2">50%</div>
<div class="r3">mixed</div>
</div>Best practices
- Use a consistent radius across a component (and a small scale across the site) so the rounding looks deliberate.
- Make circles with
border-radius: 50%on an element that is a perfect square — set equal width and height first. - Remember it clips the background and box shadow to the curve, so you do not need a separate mask for rounded images.
- Keep the radius modest on small controls — an oversized radius on a tiny button can look unbalanced.
Frequently asked questions
How do I round corners in CSS?
border-radius, e.g. border-radius: 8px rounds all four corners. Larger values give a softer curve.How do I make a circle in CSS?
border-radius: 50%. The corners round all the way into a circle. A non-square element becomes an ellipse.Do I need a border for border-radius to work?
border-radius rounds the box regardless of whether a border is shown — it also clips the background and box shadow to the rounded shape.How do I round only one corner?
border-top-left-radius: 12px, or the four-value shorthand which goes clockwise from the top-left.