border-radius

border-radius rounds a box’s outer border corners. The shorthand sets four corner radii; it also affects background painting, but does not automatically clip descendants.

Compare circular and elliptical corners

The slash separates horizontal and vertical radii. The second rectangle has wider, shallower curves than the first.

<div class="sample circle">24px circular corners</div>
<div class="sample ellipse">48px / 12px elliptical corners</div>

.sample {
  padding: 1.5rem;
  margin-block: 0.75rem;
  border: 2px solid #2563eb;
  background: #eff6ff;
}
.circle {
  border-radius: 24px;
}
.ellipse {
  border-radius: 48px / 12px;
}

Clip decoration to a rounded frame

Overflow:hidden clips the inner striped area. Remove it to see that border-radius alone does not clip the child’s square background.

<div class="frame">
  <div class="decoration" aria-hidden="true"></div>
  <p>Rounded frame with clipped decoration.</p>
</div>

.frame {
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid #2563eb;
}
.decoration {
  height: 70px;
  background: repeating-linear-gradient(
    45deg,
    #bfdbfe 0 12px,
    #2563eb 12px 24px
  );
}
p {
  padding-inline: 1rem;
}

Corner order and defaults

One value sets every corner. Two set top-left/bottom-right, then top-right/bottom-left. Three set top-left, top-right/bottom-left, then bottom-right. Four go clockwise from top-left. The same patterns apply separately before and after the slash.

The initial radii are zero, and they are not inherited. Percentages resolve horizontal radii against the border-box width and vertical radii against its height. Negative radii are invalid. If neighboring radii would overlap, the browser scales them down proportionally. Fifty percent makes a circle only when the box is square; otherwise it makes an ellipse.

Common mistakes

Rounding is decoration, not an accessible indication that something is interactive. Overflow clipping can also hide focus rings or positioned content, so inspect those cases. Border-radius does not round a border-image, and collapsed table borders have different rounding behavior.

Learn overflow, border, and box-shadow.

Sources and browser support

MDN: border-radius describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.