The CSS border-radius property can be used to give HTML elements rounded corners. Most commonly, the property is seen using only one value, but it actually will take up to four values.
Assigning one value to the border-radius property will apply that value to every corner of the HTML element. For example, if your CSS looks like this:
- div{
- border-radius: 5px;
- }
Then all four corners of your div will have the same amount of rounding applied to them.
If the property is assigned two values, the first value will be applied to the top-left and bottom-right corners, and the second value will be applied to the top-right and bottom-left corners. So if your CSS was something like this:
- div{
- border-radius: 30px 50px;
- }
Your div would take this kind of shape:
If the border-radius property has three values, the first value would be applied to the top left corner of an element, the second value would be applied to the top right and bottom left, and the third value would be applied to the bottom right, like this:
- div{
- border-radius: 20px 50px 70px;
- }
Finally, if the border-radius property has four values, each value would correspond to its own corner of the div. So the first value would be applied to the top-left corner, the second would be applied to the top-right, the third would be applied to the bottom-right, and the fourth would be applied to the bottom-left.
- div{
- border-radius: 10px 20px 30px 40px;
- }
