The rounded corners of the CSS3

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