Browser support
The number in the table represents the version number of the first browser that supports the property.
The number in front of-webkit-or-moz-indicates that the first version of the prefix is supported.
CSS3 Border-radius Properties
Using the CSS3 Border-radius property, you can make a fillet for any element.
CSS3 Border-radius-Specify each fillet
If you specify only one value in the Border-radius property, 4 rounded corners are generated.
However, if you want to specify one by one on Four corners, 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: Four fillet values are the same
Here 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:
4. Can use Border-radius to make semicircle
div.semi-circle{ height:100px; width:50px;/* rounded values are set to half of the width or height of the value */ background: #9da; Border00 50px; }
5. You can also make oval borders
Oval border-border-radius:50px/15px:
Oval border-border-radius:15px/50px:
Oval border-border-radius:50%:
The rounded corners of the CSS3