1. Round every corner equally

.card {
  border-radius: 8px;
}

A small value like 8px gives the gentle, modern look you see on most cards and buttons.

2. Make a circle or a pill

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;   /* circle */
}

.pill {
  border-radius: 999px; /* full pill shape */
}

A 50% radius on a square makes a circle; a very large pixel value on a wider box makes a rounded pill.

3. Round specific corners only

Pass four values to control each corner: top-left, top-right, bottom-right, bottom-left.

.tab {
  border-radius: 8px 8px 0 0;  /* top corners only */
}

This rounds just the top, which is handy for tabs and panel headers.

Common mistakes

  • Expecting a circle from a rectangle. 50% only makes a circle when the element is a square.
  • Content spilling over the corners. Add overflow: hidden so images inside also get clipped to the rounded shape.
  • Forgetting it needs a size. A circle needs equal width and height to look right.

Frequently asked questions

How do I round only one corner?

Use the specific property, such as border-top-left-radius: 8px, or pass four values to border-radius in clockwise order from the top-left.

Why are the corners of my image still square?

If the image overflows a rounded container, add overflow: hidden to the container, or apply border-radius directly to the image element.

Want to understand the layout properties behind this? Work through our free HTML & CSS course.