CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Example

p {

border: 2px solid red;

border-radius: 5px;

}

Definition and Usage

The border-radius property defines the radius of the element's corners.

Tip: This property allows you to add rounded corners to elements!

This property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third

value applies to bottom-right corner, and fourth value applies to bottom-left corner)

Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner)

Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners)

One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally