How to Round Corners in CSS

Use border-radius when you want elements to have softer, rounded corners instead of sharp edges. Rounded corners work well for buttons, cards, images, input fields, and profile avatars.

What you’ll build or solve

You’ll learn how to round corners in CSS using border-radius. You’ll also know how to create subtle rounding, pill buttons, and perfect circles.

When this approach works best

This approach is the right choice when the design needs a softer, more modern look or when you want elements to feel more touch-friendly.

Common real-world scenarios include:

• Rounded buttons
• Card corners
• Input fields
• Product thumbnails
• Circular profile images

This is a bad idea when the design system intentionally uses sharp, rigid edges for a technical or grid-heavy visual style.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add border-radius to the element

Use a pixel value for standard rounded corners.

<div class="card">USA pricing</div>

<style>
  .card {
    border-radius: 12px;
  }
</style>

For pill buttons or circular shapes, use a larger value.

<button class="cta">France pricing</button>

<style>
  .cta {
    border-radius: 999px;
  }
</style>

What to look for:

• Smaller values like 4px to 12px work well for cards and inputs
• Large values like 999px create pill shapes
• Use 50% for perfect circles on square elements
• Rounded corners work especially well with borders and background colors
• Keep the radius consistent across similar components

Examples you can copy

Rounded card

<div class="card">UK course plan</div>

<style>
  .card {
    border-radius: 16px;
  }
</style>

Pill button

<button class="cta">Start lesson</button>

<style>
  .cta {
    border-radius: 999px;
  }
</style>

Circular avatar

<img class="avatar" src="profile.jpg" alt="USA mentor">

<style>
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using 50% on a non-square element for circles

What the reader might do:

.avatar {
  width: 120px;
  height: 80px;
  border-radius: 50%;
}

Why it breaks: the result becomes an oval instead of a perfect circle.

Corrected approach:

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

Mistake 2: Using different radius values on matching components

What the reader might do:

.card {
  border-radius: 8px;
}

.button {
  border-radius: 24px;
}

Why it breaks: inconsistent corner styles can make the interface feel less polished.

Corrected approach:

.card,
.button {
  border-radius: 12px;
}

Mistake 3: Forgetting overflow on rounded images or containers

What the reader might do:

.card {
  border-radius: 16px;
}

Why it breaks: child images or backgrounds may still spill past the rounded edge.

Corrected approach:

.card {
  border-radius: 16px;
  overflow: hidden;
}

Troubleshooting

If the corners do not look round enough, increase the radius value.

If circles look oval, make width and height equal.

If child content spills past the corners, add overflow: hidden.

If the UI feels inconsistent, standardize one radius scale like 8px, 12px, and 16px.

Quick recap

• Use border-radius to round corners
• Small values work for subtle rounding
• Large values create pill shapes
• Use 50% for circles
• Add overflow: hidden when child content spills outside