border-radius in CSS: rounding corners all the way to a perfect circle

From perfectly square corners to gently rounded ones, a card's whole feel changes with a single line of CSS. border-radius is one of the properties with the best ratio between effort and visual impact, capable of going from a subtle curve all the way to an avatar's perfect circle.

Its simplest syntax fits in a single value, but it hides a corner order different from margin or padding, a little-known elliptical syntax, and a common trap with content overflowing rounded corners.

Definition

border-radius rounds the four corners of a box, applying automatically to the element's background, its border, and any box-shadow it carries.

.card {
  border-radius: 12px;
}

A single value, applied identically to all four corners: a twelve-pixel radius, a subtle rounding common on a modern interface card.

A different radius per corner

Like margin and padding, border-radius accepts up to four values, but in a different order: it starts at the top-left and moves clockwise by corner, not by side.

.notification {
  border-radius: 12px 12px 0 12px;
}

Each corner can also be set individually with border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius, useful when only one corner needs to change depending on a state.

border-radius also animates smoothly with transition, a simple way to soften a change of shape on hover or when a panel opens, without ever causing a visible jump on screen.

The elliptical syntax with a slash

A forward slash in the value separates two sets of radii, one horizontal and one vertical, which makes it possible to create stretched corners rather than perfectly circular ones.

.organic-shape {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Rarely used day to day, this syntax mainly serves to draw non-geometric decorative shapes, like blobs or stylised leaves, without ever reaching for an image.

A perfect circle with 50%

On a square element, whose width and height match exactly, border-radius: 50% draws a perfect circle. It is the standard technique for a round avatar.

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

On a rectangle, the same value produces an ellipse, not a circle: checking that width and height are actually equal avoids the most common mistake on this pattern. Adding object-fit: cover on an image inside then keeps it from squashing instead of cropping cleanly.

The same trap catches a badge or a notification dot: as soon as its text content varies in length, a hard-coded width breaks the circle. A minimum width paired with symmetric padding keeps it intact, whatever number ends up displayed inside.

Pairing border-radius with a shadow or a child

border-radius applies automatically to border and box-shadow, with no extra setting needed: both follow the rounded shape without any thought required. Content overflowing the box, on the other hand, behaves differently.

Frequently asked questions

Yes, automatically: border and box-shadow always follow the shape defined by border-radius, with no extra property needed to keep them in sync.

By adding overflow: hidden on the container carrying the border-radius. Without that rule, the background and border are rounded correctly, but any larger child element keeps overflowing with square angles.

It is a common trick for getting a pill shape, with perfectly rounded ends, without calculating the exact half of the element's height. A deliberately huge value automatically caps at the maximum possible, so it stays valid even if the height changes later.