What is the css rounded corner property?

The css rounded corner attribute is border-radius, through which we can make rounded corners for any element, such as [border-radius: 15px 50px 30px 5px]. If we specify only one value in the border-redius attribute, four rounded corners will be generated.

The rounded corner attribute is the border-radius attribute, through which we can make "rounded corners" for any element.

(Learning video sharing: java video tutorial)

border-radius    所有四个边角 border-*-*-radius 属性的缩写    
border-top-left-radius    定义了左上角的弧度    
border-top-right-radius    定义了右上角的弧度    
border-bottom-right-radius    定义了右下角的弧度    
border-bottom-left-radius    定义了左下角的弧度

If you specify only one value in the border-radius attribute, 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 , 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, the third value is the lower right corner

Two values: 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 rounded corners have the same value

The following are three examples:

1. Four values ​​- border-radius: 15px 50px 30px 5px:

2. Three values ​​- border-radius: 15px 50px 30px:

3. Two values ​​- border-radius: 15px 50px:

Code example:

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Related recommendations: CSS tutorial

The above is the detailed content of What is the css rounded corner property?. For more information, please follow other related articles on the PHP Chinese website!