CSS border-radius Property

What You’ll Learn

The border-radius property creates rounded corners on elements. It is one of the most common CSS properties for modern UI design — from soft card corners to circles and pill-shaped buttons.

Definition and Usage

The border-radius CSS property is used to create rounded corners on elements. It defines how much rounding you want on each corner, which can be applied to all corners uniformly or individually. Rounded corners add a softer, more modern look to your design.

You can use border-radius on boxes, buttons, images, cards, avatars, and any block-level or inline-block element. Combined with background colors and borders, it is one of the easiest ways to improve visual polish.

📝 Syntax

The syntax for border-radius is simple and flexible. You can specify one, two, three, or four values to define the rounding of the corners.

selector {
  border-radius: <length> | <percentage>;
}

Basic Example

.rounded-box {
  width: 200px;
  height: 100px;
  background: lightblue;
  border-radius: 15px;
}

Syntax Rules

• One value — Applies to all four corners.
• Two values — The first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.
• Three values — The first value applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner.
• Four values — Each value applies to a different corner in the order: top-left, top-right, bottom-right, and bottom-left.
• Values can be lengths like px, em, or rem, or percentages relative to the element’s size.

Default Value

The default value of border-radius is 0, which means the element has sharp, right-angled corners with no rounding.

💎 Property Values

The border-radius property accepts length values, percentages, and shorthand combinations of one to four values.

Corner Shorthand: 1, 2, 3, and 4 Values

border-radius follows the same corner order as margin and padding shorthand. The diagrams below show which corner each value affects.

border-radius vs Corner Longhands

Examples Gallery

Try border-radius with rounded boxes, circles, pill buttons, and four-corner shorthand values.

<style>
  .rounded-box {
    width: 200px;
    height: 100px;
    background: lightblue;
    border-radius: 15px;
  }
</style>
<div class="rounded-box"></div>

.avatar {
  width: 80px;
  height: 80px;
  background: #2563eb;
  border-radius: 50%;
}

.pill-btn {
  padding: 0.5rem 1.25rem;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
}

.diagonal-corners {
  width: 180px;
  height: 80px;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 12px 0 12px 0;
}

💡 Best Practices