Writing
border-radius: length;
The parameter value can be in the form of a number or a percentage
Round shape
If it is a square, set it to a circle, and set the parameter to half of the length or width of the rectangle.
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
/* border-radius: 100px; */
}
Rounded Rectangle
Set the parameter to half the height.
.juxing {
width:400px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
Other ways of writing attributes
- This attribute is a shorthand attribute, which can be followed by four values, which represent the upper left corner, upper right corner, lower right corner, and lower left corner.
- 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius