The rounded border of css33-study notes 15

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