CSS div side rounded

CSS allows us to round the corners of a div by using the border-radius property. The border-radius property accepts one or more values that specify the radii of the rounded corners. We can specify values in pixels, ems, or percentages.

To apply rounded corners to all sides of a div, we can use a single value for border-radius. This will make all corners rounded to the same degree.

Example:

div {
  border-radius: 10px;
}

To apply different radii to each corner of a div, we can use four values for border-radius, separated by spaces in the following order: top-left, top-right, bottom-right, bottom-left.

Example:

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

We can also apply rounded corners to specific sides of a div by using the border-radius property in combination with border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Example:

div {
  border-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

This will make the top-left and bottom-left corners rounded, but the top-right and bottom-right corners will be square.

In conclusion, the border-radius property in CSS makes it easy to apply rounded corners to div elements. We can apply rounded corners to all sides with a single value, or specify different radii for each corner. We can also apply rounded corners to specific sides of the div.