The border-radius Property in CSS

The border-radius property in CSS is used to create rounded corners on elements. It allows you to define how rounded the corners of an element should be, adding a smooth, curved effect to rectangular boxes. This property can be applied to all four corners of an element, either uniformly or with different radii for each corner.

Values of border-radius

1. Single Value

   • When a single value is provided, it applies the same radius to all four corners.

   .single-radius {
     border-radius: 10px; /* All four corners are rounded with a 10px radius */
   }
   

2. Two Values

   • The first value sets the radius for the top-left and bottom-right corners, and the second value sets the radius for the top-right and bottom-left corners.

   .two-radius {
     border-radius: 10px 20px; /* Top-left and bottom-right: 10px; Top-right and bottom-left: 20px */
   }
   

3. Three Values

   • The first value sets the radius for the top-left corner, the second value sets the radius for the top-right and bottom-left corners, and the third value sets the radius for the bottom-right corner.

   .three-radius {
     border-radius: 10px 20px 30px; /* Top-left: 10px; Top-right and bottom-left: 20px; Bottom-right: 30px */
   }
   

4. Four Values

   • Each value sets the radius for a specific corner in the order: top-left, top-right, bottom-right, bottom-left.

   .four-radius {
     border-radius: 10px 20px 30px 40px; /* Top-left: 10px; Top-right: 20px; Bottom-right: 30px; Bottom-left: 40px */
   }
   

5. Elliptical Radius

   • You can specify an elliptical border radius using two values for each corner: one for the horizontal radius and one for the vertical radius.

   .ellipse-radius {
     border-radius: 50px 25px; /* Horizontal radius: 50px; Vertical radius: 25px */
   }
   

   • To apply elliptical radii to individual corners, use the following syntax:

     .ellipse-corners {
       border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;
     }
     

Examples

<div class="box single-radius">Single Radius</div>
<div class="box two-radius">Two Radius</div>
<div class="box three-radius">Three Radius</div>
<div class="box four-radius">Four Radius</div>
<div class="box ellipse-radius">Elliptical Radius</div>

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid darkblue;
  margin: 10px;
}

.single-radius {
  border-radius: 20px;
}

.two-radius {
  border-radius: 20px 10px;
}

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

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

.ellipse-radius {
  border-radius: 50px 25px;
}

Explanation

• Single Radius: All corners have a radius of 20px, making each corner uniformly rounded.
• Two Radius: The top-left and bottom-right corners have a radius of 20px, while the top-right and bottom-left corners have a radius of 10px.
• Three Radius: The top-left corner is rounded with a radius of 20px, the top-right and bottom-left corners with a radius of 30px, and the bottom-right corner with a radius of 40px.
• Four Radius: Each corner has a different radius specified.
• Elliptical Radius: Applies an elliptical radius where the horizontal radius is 50px and the vertical radius is 25px.

Use Cases

• Design Enhancement: Add rounded corners to buttons, containers, images, and other elements to create a softer and more modern look.
• Visual Appeal: Use rounded corners to enhance visual appeal and align with design trends that favor non-rectangular shapes.
• User Interface: Improve the usability and aesthetics of form fields, cards, and other interactive elements.