CSS3 rounded corners
CSS3 rounded corners
Use CSS3 border-radius property, you can make any element "corner."
Browser Support
Figures in the table represent the first browser to support the property version number.
-webkit- or -moz- previous figures expressed support for the first version of the prefix.
属性 | |||||
---|---|---|---|---|---|
border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius property
Use CSS3 border-radius property, you can make any element "corner."
The following three examples:
1. Specify the background color of the rounded element:
Fillet!
2. Specify the border element fillet:
Fillet!
3. Specify the background image elements fillet:
Fillet!
Code is as follows:
Examples
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;
}
try it"
CSS3 border-radius - specify each fillet
If you specify only one value in the border-radius property, then it will generate four fillets.
But if you want to specify eleven at the four corners, you can use the following rules:
- Four values: top left corner of the first value and the second value is the upper right corner, the lower right corner is the third, and the fourth is the bottom left corner.
- Three values: top left corner of the first value and the second value is the top right and bottom left, bottom right corner of the third value
- Two values: the first is the top left and bottom right corner, and the second is the upper right corner and the lower left corner
- A value: the same four rounded value
The following three examples:
1. The four values - border-radius: 15px 50px 30px 5px:
2. The three values - border-radius: 15px 50px 30px:
3. The two values - border-radius: 15px 50px:
The following is the source code:
Examples
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;
}
try it"
You can also create an elliptical corner:
Examples
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;
}
try it"
CSS3 rounded corners property
Attributes | description |
---|---|
border-radius | All four corners of the border - * - * - radius properties Acronym |
border-top-left-radius | It defines the upper left corner of the arc |
border-top-right-radius | It defines the upper right corner of radian |
border-bottom-right-radius | It defines the arc of the lower right corner |
border-bottom-left-radius | It defines the lower left corner of the arc |