border-radius
The border-radius property defines the value of the border radius of an element.
We can have one to four values for border-radius.
Syntax
border-radius: value;
One value:
border-radius: 5px;
The value applies to all four corners.
Two values:
border-radius: 5px 10px;
The first value, 5px applies to the top-left and the bottom-right corners and the second value, 10px applies to the top-right and bottom-left corners.
Three values:
border-radius: 5px 10px 20px;
The first value, 5px applies to the top-left corner, the second value, 10px applies to the top-right and bottom-left corners, and the third value, 20px applies to the bottom-right corner.
Four values:
border-radius: 5px 10px 20px 15px;
The first value, 5px applies to the top-left corner, the second value, 10px applies to the top-right corner, the third value, 20px applies to the bottom-right corner, and the fourth value, 15px applies to the bottom-left corner
Example
.mydiv{
border:1px solid red;
border-radius: 5px;
}
Property Values
value: sets the given value as the radius of the border.