CSS border-radius Property

CSS border-radius Property

The border-radius property in CSS is used to round the corners of an element’s border. It allows you to create smooth, curved edges or even full circles and ellipses.

1. Syntax

selector {
  border-radius: value; /* Single value or multiple values */
}

✅ Accepts one to four values to define different corner radii.

Value Options:

Value	Description	Example
length	It specifies the radius in pixels, ems, etc.	10px, 1em, 50%
%	Percentage of the element’s width/height	50% (perfect circle)

2. Example – Rounded Corners

div {
  width: 200px;
  height: 100px;
  background: blue;
  border-radius: 20px;
}

✅ The element will have smooth 20px rounded corners.

3. Example – Different Radius for Each Corner

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

✅ This applies different values for each corner in clockwise order:

• Top-left: 10px

• Top-right: 20px

• Bottom-right: 30px

• Bottom-left: 40px

4. Example – Using Two Values

div {
  border-radius: 30px 10px;
}

✅ First value: Applies to top-left and bottom-right.
✅ Second value: Applies to top-right and bottom-left.

5. Example – Creating a Circle

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

✅ A perfect circle is created when border-radius: 50% is applied to a square element.

6. Example – Creating an Ellipse

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

✅ The element has an elliptical shape with different horizontal and vertical radii.

7. Using Individual Corner Properties

div {
  border-top-left-radius: 20px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 50px;
}

✅ Each corner can be controlled separately for more precise styling.

8. Example – Applying to Images

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

✅ This creates a circular image.

9. Best Practices

✔ Use border-radius: 50% for perfect circles.
✔ For buttons, use border-radius: 5px - 15px for smooth rounded edges.
✔ Use border-radius with images to make profile pictures or avatars.