Rounded Corners

You will be able to use border-radius to round one or more corners of a CSS box, including creating pills and circles.

What it is

border-radius is a CSS property that defines how much each corner of a box is curved. Think of it as setting the radius of a circle that would fit into the corner: a small radius gives a subtle curve, while a large radius can turn a rectangle into a pill or a square into a circle. It affects the box’s border and background, not necessarily the content inside it. Related terms include box model, overflow, border-box, and clip-path.

Why it matters

• It creates friendly, modern UI shapes for buttons, cards, inputs, and badges.
• It turns square images or avatars into circles when the element is square.
• It makes pill-shaped tags and navigation items with a single value.
• It can round only selected corners, such as the top of a card header.
• It works with responsive layouts because percentages scale with the element.

Syntax or steps

The smallest useful pattern is one value:

.box {
  border-radius: 8px;
}

This rounds all four corners by 8 pixels. You can also provide four values in clockwise order: top-left, top-right, bottom-right, bottom-left.

.box {
  border-radius: 10px 20px 30px 40px;
}

For elliptical corners, use a slash to separate horizontal and vertical radii:

.box {
  border-radius: 50% / 25%;
}

Example

<div class="card">
  <div class="avatar">A</div>
  <div class="pill">New</div>
</div>

<style>
.card {
  width: 220px;
  padding: 16px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.avatar {
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background: #4a90e2;
  color: white;
  border-radius: 50%;
}

.pill {
  display: inline-block;
  padding: 6px 14px;
  background: #2ecc71;
  color: white;
  border-radius: 999px;
}
</style>

Part by part:

• .card uses border-radius: 12px to round all four corners of the container.
• .avatar is a square because width and height match, so border-radius: 50% makes it a circle.
• .pill uses a very large radius, 999px, which is larger than the element’s height, so the browser clamps it to a pill shape.
• The display: inline-block on .pill lets padding and border-radius apply to a text badge.

Common mistakes

• Expecting a circle from 50% on a rectangle. Use equal width and height, or use border-radius: 999px for a pill.
• Forgetting that child content can overflow. Add overflow: hidden to the rounded parent if inner images or boxes must be clipped.
• Applying it to inline elements. Some inline elements ignore box properties; use display: inline-block or display: block.
• Using too many values without order. Remember the clockwise order: top-left, top-right, bottom-right, bottom-left.

When to use it

Use border-radius for simple rounded rectangles, pills, and circles. Use clip-path when you need complex shapes, such as triangles, notches, or custom polygons.

Practice

Guided exercise: Create a square div that is 100 pixels wide and 100 pixels tall, then make it a circle.

.circle {
  width: 100px;
  height: 100px;
  background: #333;
  border-radius: 50%;
}

Challenge: Round only the top two corners of a card by 16 pixels, leaving the bottom corners square.

Solution hint: Use border-radius: 16px 16px 0 0;.

Quick check

Question: What does border-radius: 999px usually produce on a short button?

Answer: A pill shape, because the radius is larger than the button’s height and the browser limits it to the maximum possible curve.

Summary

border-radius controls the curvature of a box’s corners using lengths or percentages. It is the standard CSS tool for rounded rectangles, pills, and circles, especially when combined with equal dimensions or overflow: hidden.