CSS Rounded Corners

The CSS `border-radius` property is used to create rounded corners on HTML elements. It can be applied to all elements except `table` elements when `border-collapse` is `collapse`.

Understanding `border-radius`

The `border-radius` property defines the radius of the element's corners. It can accept one to four values, allowing for a variety of rounded corner configurations.

Syntax

The syntax for the `border-radius` property is:

/* Border Radius Syntax */
border-radius:  |  |    ;

        

• Single Value: Applies the same radius to all four corners. Example: border-radius: 10px;
• Two Values: The first value applies to the top-left and bottom-right corners, while the second applies to the top-right and bottom-left corners. Example: border-radius: 10px 20px;
• Three Values: The first value applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner. Example: border-radius: 10px 20px 30px;
• Four Values: Applies different radii to each corner. Example: border-radius: 10px 20px 30px 40px;

Examples

/* Single Radius */
.rounded-single {
    border-radius: 15px;
}

            

/* Two Radii */
.rounded-two {
    border-radius: 20px 10px;
}

            

/* Three Radii */
.rounded-three {
    border-radius: 10px 20px 30px;
}

            

/* Four Radii */
.rounded-four {
    border-radius: 10px 20px 30px 40px;
}