CSS Rounded Corners

What Is border-radius?

The border-radius property allows you to create rounded corners for elements. It replaces sharp 90-degree corners with smooth curves.

Basic Syntax

.box {
  border-radius: 20px;
}

This applies a 20px curve to all four corners.

Four-Value Syntax

You can control each corner separately:

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

Order: top-left, top-right, bottom-right, bottom-left.

Two-Value Syntax

.box {
  border-radius: 20px 50px;
}

First value applies to top-left & bottom-right. Second value applies to top-right & bottom-left.

Individual Corner Properties

.box {
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

Creating Circles

To create a circle, width and height must be equal, and border-radius must be 50%.

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

Creating Pill Buttons

.button {
  padding: 10px 25px;
  border-radius: 50px;
}

Elliptical Corners

You can create elliptical curves using slash syntax:

.box {
  border-radius: 50px / 20px;
}

Rounded Images

img {
  border-radius: 15px;
}

Overflow and Clipping

If child content overflows, use:

.box {
  border-radius: 20px;
  overflow: hidden;
}

Summary

• border-radius creates rounded corners
• Supports 1–4 values
• Can create circles and pills
• Supports elliptical syntax