Detailed explanation of relevant knowledge about rounded corners in CSS3

CSS3 Rounded Corners

Using CSS3 border-radius property, you can make "rounded corners" for any element.

Browser support

The number in the table indicates the version number of the first browser that supports this attribute. The number before

-webkit- or -moz- indicates the first version that supports the prefix.

CSS3 border-radius property

Using the CSS3 border-radius property, you can make "rounded corners" for any element.

The code is as follows:

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

CSS3 border-radius - specify each rounded corner

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

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 is the source code:

#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; 
}

You can also create elliptical corners:

Example

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

【Related Recommendations】

1. Special Recommendations："php Programmer Toolbox" V0.1 version download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Detailed explanation of relevant knowledge about rounded corners in CSS3. For more information, please follow other related articles on the PHP Chinese website!