CSS3 圓角

原始碼

1. *{ 
2.  
3. /* Gecko browsers */ 
4. -moz-border-radius: 20px; /*all*/ 
5. -moz-border-radius: 20px 0; /*TL&BR, TR&BL*/ 
6. -moz-border-radius: 20px 0 20px; /*TL, TR&BL, BR*/ 
7. -moz-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/ 
8. -moz-border-radius: 20px/ 10px; /*(X)/ (Y)*/ 
9. -moz-border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/ 
10.  
11. -moz-border-radius-topleft: 20px; 
12. -moz-border-radius-topright: 0; 
13. -moz-border-radius-bottomright: 20px; 
14. -moz-border-radius-bottomleft: 0; 
15.  
16.  
17. /* Webkit browsers */ 
18. -webkit-border-radius: 20px; /*all*/ 
19. -webkit-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/ 
20.  
21. -webkit-border-top-left-radius: 20px; 
22. -webkit-border-top-right-radius: 0; 
23. -webkit-border-bottom-right-radius: 20px; 
24. -webkit-border-bottom-left-radius: 0; 
25.  
26.  
27. /* Konqueror (KDE) */ 
28. -khtml-border-radius: 20px; /*all*/ 
29. -khtml-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/ 
30.  
31. -khtml-border-top-left-radius: 20px; 
32. -khtml-border-top-right-radius: 20px; 
33. -khtml-border-bottom-left-radius: 20px; 
34. -khtml-border-bottom-right-radius: 20px; 
35.  
36.  
37. /* ??? browsers */ 
38. -goog-ms-border-radius: 20px; /*all*/ 
39. -goog-ms-border-radius: 20px 0 20px 0;/*TL, TR, BR, BL*/ 
40.  
41. -goog-ms-border-top-left-radius: 20px; 
42. -goog-ms-border-top-right-radius: 0; 
43. -goog-ms-border-bottom-right-radius: 20px; 
44. -goog-ms-border-bottom-left-radius: 0; 
45.  
46.  
47. /* W3C syntax */ 
48. border-radius: 20px; /*all*/ 
49. border-radius: 20px 0; /*TL&BR, TR&BL*/ 
50. border-radius: 20px 0 20px; /*TL, TR&BL, BR*/ 
51. border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/ 
52. border-radius: 20px/ 10px; /*(X)/ (Y)*/ 
53. border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/ 
54.  
55. border-top-left-radius: 20px; 
56. border-top-right-radius: 0; 
57. border-bottom-right-radius: 0; 
58. border-bottom-left-radius:  20px; 
59.  
60. } 

*{

/* Gecko browsers */
-moz-border-radius: 20px; /*all*/
-moz-border-radius: 20px 0; /*TL&BR, TR&BL*/
-moz-border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
-moz-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
-moz-border-radius: 20px/ 10px; /*(X)/ (Y)*/
-moz-border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 0;


/* Webkit browsers */
-webkit-border-radius: 20px; /*all*/
-webkit-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;


/* Konqueror (KDE) */
-khtml-border-radius: 20px; /*all*/
-khtml-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/

-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;


/* ??? browsers */
-goog-ms-border-radius: 20px; /*all*/
-goog-ms-border-radius: 20px 0 20px 0;/*TL, TR, BR, BL*/

-goog-ms-border-top-left-radius: 20px;
-goog-ms-border-top-right-radius: 0;
-goog-ms-border-bottom-right-radius: 20px;
-goog-ms-border-bottom-left-radius: 0;


/* W3C syntax */
border-radius: 20px; /*all*/
border-radius: 20px 0; /*TL&BR, TR&BL*/
border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
border-radius: 20px/ 10px; /*(X)/ (Y)*/
border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;

}

參考來源：
CSS Backgrounds and Borders Module Level 3
CSS Border Radius :: Richard A. Johnson
border-radius與圓角 - wowbox blog (網頁設計知識庫)