What does each value of the css3 rounded corners property represent?

In CSS3, the rounded corner attribute "border-radius" has 1 to 4 attribute values. When four attribute values ​​are set, the attribute values ​​represent the upper left corner, upper right corner, lower right corner and lower left corner in turn. The rounded corner attribute value, the syntax is "border-radius: upper left rounded value, upper right rounded value, lower right rounded value, lower left rounded value".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does each value of the css3 rounded corner property represent?

CSS3 border-radius - specifies each rounded corner,

border-radius property is one and can specify up to four border -*- composite property of the radius property

If you specify only one value in the border-radius property, 4 rounded corners will be generated.

However, if you want to specify the four corners one by one, you can use the following rules:

· Four values: the first value is the upper left corner, the second value is the upper right corner corner, the third value is the lower right corner, and the fourth value is the lower left corner.

· Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner

· Two values: the first The first value is the upper left corner and the lower right corner, the second value is the upper right corner and the lower left corner

· One value: The four fillet values ​​are the same

The order of the four values ​​​​for each radius Is: upper left corner, upper right corner, lower right corner, lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.

Example 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Example 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

(Learning video sharing : css video tutorial)

The above is the detailed content of What does each value of the css3 rounded corners property represent?. For more information, please follow other related articles on the PHP Chinese website!