CSS3 Border-radius Border Rounded corners

1.1 Fillet Properties

The CSS3 provides 5 fillet properties:

Border-radius: Sets the fillet style for 4 borders at the same time.

Border-top-left-radius: Sets the fillet style of the upper-left border.

Border-top-right-radius: Sets the rounded style of the top-right border.

Border-bottom-left-radius: Sets the rounded style of the bottom-left border.

Border-bottom-right-radius: Sets the rounded style of the bottom-right border.

Example:

1.2 Browser support conditions

Minimum version support: IE 9, Chrome 4

1.3 reference materials

Specification: https://www.w3.org/TR/css3-background/#the-border-radius

Document: Https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

2. Format and type of value values

The value of the Border-*-radius property sets the horizontal and vertical radii, respectively, and the vertical radius defaults to the horizontal radius value if the vertical radius is omitted.

For each value, the supported units have fixed lengths and percentages. If you set the percent format, the percentage of the horizontal radius refers to the width of the border, and the percentage of the vertical radius is the height of the bounding rectangle.

The combinations are as follows (take Border-radius as an example):

1) border-radius:20px; Indicates that the horizontal and vertical radii of the fillet are 20px in length.

2) border-radius:20px/40px; The length of the horizontal radius representing the fillet is 20px and the vertical radius is 20px.

3) border-radius:20%; Indicates that the horizontal and vertical radii of the fillet are 20% of the respective border length.

4) border-radius:20%/30%; Indicates that the horizontal radius of the fillet is 20% of the border width, and the vertical radius is 20% of the border height.

5) border-radius:20px/30%; The horizontal radius length of the fillet is 20px, and the vertical radius is 20% of the border height.

Example:

3. Border-radius 1~4 Description of parameters

Border-radius can set the same value for Four corners at once, or you can set a fillet style for 4 corners.

The secret is to set the number of Border-radius parameters.

First look at the parameters of the CSS specification for Border-radius: [<length> | <percentage>]{1,4} [/[<length> | <percentage>]{1,4 } ]?

Can be learned that the Border-radius parameter range of 1~4, here to note the point of the horizontal radius and vertical radius of the use of the separate: in the Border-radius set the horizontal radius of 4 corners and then set the vertical radius of 4 corners.

The following separately describes the meaning of the parameter 1~4:

3.1 Number of parameters: 1

Description: This setting is used for the rounded style of the 4 borders.

Example: border-radius:20px; 4 border fillet styles are 20px

3.2 Number of parameters: 2

Description

The ① parameter: the rounded style of the upper-left and bottom-right borders.

The ② parameter: the rounded style of the upper-right and bottom-left borders.

Example: border-radius:20px 40px; Upper-left and lower-right corner: 20px, Upper-right corner and lower-left corner: 40px

3.3 Number of parameters: 3

Description

The ① parameter: the rounded style of the top-left border.

The ② parameter: the rounded style of the upper-right and bottom-left borders.

The ③ parameter: the rounded style of the bottom-right border.

Example: border-radius:20px 40px 60px; Upper left corner: 20px, upper right and lower left: 40px, lower right: 60px

3.4 Number of parameters: 4

Description

The ① parameter: the rounded style of the top-left border.

The ② parameter: the rounded style of the top-right border.

The ③ parameter: the rounded style of the bottom-right border.

The ④ parameter: the rounded style of the bottom-left border.

Example: border-radius:20px 40px 60px 80px; Upper left corner: 20px; upper right corner: 40px; lower right corner: 60px; lower left corner: 80px

3.4 Number of parameters: 4

Description

The ① parameter: the rounded style of the top-left border.

The ② parameter: the rounded style of the top-right border.

The ③ parameter: the rounded style of the bottom-right border.

The ④ parameter: the rounded style of the bottom-left border.

Example: border-radius:20px 40px 60px 80px; Upper left corner: 20px; upper right corner: 40px; lower right corner: 60px; lower left corner: 80px

4. Example

1. border-radius:20px; Set 4 border fillet styles at the same time: both the horizontal and vertical radii are 20px<br/><div class= "div border-radius-1" ></div><br/>2. border-radius:20px 40px; Upper-left and lower-right corner: 20px, upper right and bottom left: 40px<br/><div class= "div border-radius-2" ></div><br/>3. border-radius:20px 40px 60px; Upper left corner: 20px, upper right and lower left: 40px, lower right: 60px<br/><div class= "div border-radius-3" ></div><br/>4. border-radius:20px 40px 60px 80px; Upper left corner: 20px; upper right corner: 40px; lower right corner: 60px; lower left: 80px<br/><div class= "Div border-radius-4" ></div>

. border-radius-1{  border-radius:20px;}. border-radius-2{  border-radius:20px 40px}.border-radius-3{  border-radius:20px 40px 60px;}. border-radius-4{  border-radius:20px 40px 60px 80px;}. div{  height:150px;  width:160px;  margin-left:20px;  margin-top:10px;  Background-color: #82AF6F;}

