css - Rounded Corners in CSS

Rounded corners can be created using the border-radius property in CSS. This property allows you to round the corners of HTML elements such as <div>, <button>, <img>, etc.

1. Uniform Rounded Corners

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border-radius: 20px; /* All corners */
}

<div class="box"></div>

Explanation:

  • border-radius: 20px rounds all four corners by 20 pixels.

2. Different Radius for Each Corner

.box {
  border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */
}

<div class="box"></div>

 Explanation:

  • You can specify up to four values in clockwise order.

 3. Ellipse or Circle Corners

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

<div class="circle"></div>

Explanation:

  • border-radius: 50% turns a square into a perfect circle.

 4. Rounded Corners on Specific Sides

.round-top {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.round-bottom {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

<div class="box round-top"></div>
<div class="box round-bottom"></div>

 Explanation:

  • Use border-*-*-radius to target individual corners.

5. Using border-radius with Percentages

.oval {
  width: 200px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
}

<div class="oval"></div>

Explanation:

  • Works great for creating oval shapes or responsive designs.

6. Using border-radius in Shorthand with / for Elliptical Corners

.elliptical {
  width: 200px;
  height: 100px;
  background-color: green;
  border-radius: 50px / 25px;
}

<div class="elliptical"></div>