CSS3 introduced the border-radius property, which allows you to create rounded corners on elements such as boxes and buttons. You can specify the radius of the corners by using a length value or a percentage value.

Here is an example of how you can use the border-radius property to create rounded corners on a box:

.box {
    border: 1px solid #ccc;
    border-radius: 10px;
}

In this example, the border-radius property is set to 10px, which means that the corners of the box will be rounded with a radius of 10 pixels.

You can also specify different radii for each corner of the box using the following properties:

• border-top-left-radius: This property specifies the radius of the top-left corner.
• border-top-right-radius: This property specifies the radius of the top-right corner.
• border-bottom-left-radius: This property specifies the radius of the bottom-left corner.
• border-bottom-right-radius: This property specifies the radius of the bottom-right corner.

Here is an example of how you can use these properties to create asymmetrical rounded corners on a box:

.box {
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 40px;
}

In this example, the top-left corner has a radius of 10 pixels, the top-right corner has a radius of 20 pixels, the bottom-left corner has a radius of 30 pixels, and the bottom-right corner has a radius of 40 pixels.

Note: The border-radius property is supported in all modern browsers, but it is not supported in Internet Explorer 8 and earlier. If you need to support older browsers, you can use a polyfill or a workaround to provide support for rounded corners.