How can CSS set four fillets respectively?

css How to set the border ？ Many times when developing the front end of the web page , In order to make the things on the web page look more comfortable , We may need to set some rounded borders, such as buttons , that , How do we set the rounded border ？ This article will introduce you to css How to set the rounded border .
css The most common and easiest way to set a rounded border is to use border-radius attribute .

CSS Only one property needs to be set for fillet ：border-radius（ The meaning is " Border radius "）. You provide a value for this property , You can set the radius of four fillets at the same time . All legal CSS Measures can be used ：em、ex、pt、px、 Percentage, etc .

border-radius It can be set at the same time 1 To 4 It's worth .

If you set 1 It's worth , Express 4 All rounded corners use this value .

css Rounded border code ：border-radius: 15px;

If you set two values , Indicates that the upper left corner and the lower right corner use the first It's worth , The upper right and lower left use the second value .

css Rounded border code ：border-radius: 15px 5px;

If you set three values , Indicates that the first value... Is used in the upper left corner , The upper right and lower left use the second value , Use the third value in the lower right corner .

css Rounded border code ：border-radius: 15px 5px 25px;

If you set four values , Then in turn Corresponding to the upper left corner 、 Upper right corner 、 The lower right corner 、 The lower left corner （ Clockwise order ）.

css Rounded border code ：border-radius: 15px 5px 25px 0px;


border-radius You can also set a second set of values with slashes . The first set of values represents the horizontal radius , The second set of values represents the vertical radius . The second set of values can also be set at the same time 1 To 4 It's worth , The application rule is the same as the first set of values .

Besides setting four fillets at the same time , You can also set each corner separately . Corresponding to four corners ,CSS3 Four separate properties are provided ：

All four properties can be set at the same time 1 To 2 It's worth . If you set 1 It's worth , It means that the horizontal radius is equal to the vertical radius . If you set 2 It's worth , The first value is the horizontal radius , The second value represents the vertical radius .