HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Use CSS3 border-radius property, you can make any element "corner."
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 |
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:
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:
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:
You can also create an elliptical corner:
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 |