CSS border-radius

The CSS border-radius property is used to create rounded corners on elements. This property accepts one to four values, representing radii for the top-left, top-right, bottom-right, and bottom-left corners of an element, in that order.

Here's how the border-radius property works:

• If one value is specified, it applies to all four corners.
• If two values are specified, the first applies to the top-left and bottom-right corners, while the second applies to the top-right and bottom-left corners.
• If three values are specified, the first applies to the top-left corner, the second applies to the top-right and bottom-left corners, and the third applies to the bottom-right corner.
• If four values are specified, they apply to the top-left, top-right, bottom-right, and bottom-left corners in that order.

Let's see some examples of how to use the border-radius property:

    .box {
      width: 200px;
      height: 200px;
      background-color: #f2f2f2;
      border-radius: 50px;
    }
  

In this example, we have a div element styled with a border-radius of 50px. This creates a circle since the radius is equal on all four corners.

    .box {
      width: 200px;
      height: 100px;
      background-color: #f2f2f2;
      border-radius: 20px 50px;
    }
  

In this example, we have a div element styled with a border-radius of 20px for the top-left and bottom-right corners, and 50px for the top-right and bottom-left corners.

Experiment with different values for the border-radius property to create various shapes for your elements with rounded corners.