css - Rounded Corners Part 2: Controlling Individual Corners

How to Apply Different Radii to Each Corner

Instead of applying the same radius to all corners, you can control each corner separately.

Example 3: Different Radius for Each Corner

.box {

  width: 200px;

  height: 100px;

  background-color: red;

  border-radius: 20px 10px 30px 5px;

}

Explanation:

The values are applied in clockwise order:

20px → top-left

10px → top-right

30px → bottom-right

5px → bottom-left

Example 4: Rounded Top Corners Only

.card {

  width: 250px;

  height: 150px;

  background-color: purple;

  border-radius: 20px 20px 0 0;

}

Explanation:

Only the top corners are rounded, while the bottom corners remain sharp.

This is often used in cards, modals, and headers.