Advanced Search

CSS - CSS3 border-radius - understanding CSS3 Moz Mozilla KHTML Webkit Border Radius.css

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. 	201008051249 - brandonjp - me trying to remember css/moz/webkit border radius
  3. 	Thanks to Jacob Bijani - CSS Border Radius http: //bit.ly/8Y8cJT
  4. 	Thanks to CSS Border Radius : : Richard A. Johnson http: //bit.ly/c9FclS
  5. */
  6.  
  7.  
  8. CSS3 {
  9. 	border-top-left-radius: 22px;
  10. 	border-top-right-radius: 44px;
  11. 	border-bottom-right-radius: 66px;
  12. 	border-bottom-left-radius: 88px;
  13. }
  14.  
  15. MOZILLA {
  16. 	-moz-border-radius-topleft: 22px;
  17. 	-moz-border-radius-topright: 44px;
  18. 	-moz-border-radius-bottomright: 66px;
  19. 	-moz-border-radius-bottomleft: 88px;
  20. }
  21.  
  22. KHTML {
  23. 	-khtml-border-top-left-radius: 22px;
  24. 	-khtml-border-top-right-radius: 44px;
  25. 	-khtml-border-bottom-right-radius: 66px;
  26. 	-khtml-border-bottom-left-radius: 88px;
  27. }
  28.  
  29. WEBKIT {
  30. 	-webkit-border-top-left-radius: 22px;
  31. 	-webkit-border-top-right-radius: 44px;
  32. 	-webkit-border-bottom-right-radius: 66px;
  33. 	-webkit-border-bottom-left-radius: 88px;
  34. }
  35.  
  36.  
  37.  
  38. TOP-LEFT {
  39. 	border-top-left-radius: 22px;
  40. 	-moz-border-radius-topleft: 22px;
  41. 	-khtml-border-top-left-radius: 22px;
  42. 	-webkit-border-top-left-radius: 22px;
  43. }
  44.  
  45. TOP-RIGHT {
  46. 	border-top-right-radius: 44px;
  47. 	-moz-border-radius-topright: 44px;
  48. 	-khtml-border-top-right-radius: 44px;
  49. 	-webkit-border-top-right-radius: 44px;
  50. }
  51.  
  52. BOTTOM-RIGHT {
  53. 	border-bottom-right-radius: 66px;
  54. 	-moz-border-radius-bottomright: 66px;
  55. 	-khtml-border-bottom-right-radius: 66px;
  56. 	-webkit-border-bottom-right-radius: 66px;
  57. }
  58.  
  59. BOTTOM-LEFT {
  60. 	border-bottom-left-radius: 88px;
  61. 	-moz-border-radius-bottomleft: 88px;
  62. 	-khtml-border-bottom-left-radius: 88px;
  63. 	-webkit-border-bottom-left-radius: 88px;
  64. }
  65.  
  66.  
  67.  
  68. CSS 3 {
  69. /* 5px radius on all 4 corners of the table */
  70. 	border-radius: 5px;
  71.  
  72. /* 5px radius on top left and bottom right corners only */
  73. 	border-radius: 5px 0 5px 0;
  74.  
  75. /* 5px radius on bottom left and top right corners only */
  76. 	border-radius: 0 5px 0 5px;
  77.  
  78. /* 5px radius on the top left corner only */
  79. 	border-top-left-radius: 5px;
  80. /* 5px radius on the bottom left corner only */
  81. 	border-bottom-left-radius: 5px;
  82. /* 5px radius on the top right corner only */
  83. 	border-top-right-radius: 5px;
  84. /* 5px radius on the bottom right corner only */
  85. 	border-bottom-right-radius: 5px;
  86. }
  87.  
  88. Mozilla (Firefox) {
  89. /* 5px radius on all 4 corners of the table */
  90. 	-moz-border-radius: 5px;
  91.  
  92. /* 5px radius on top left and bottom right corners only */
  93. 	-moz-border-radius: 5px 0 5px 0;
  94.  
  95. /* 5px radius on bottom left and top right corners only */
  96. 	-moz-border-radius: 0 5px 0 5px;
  97.  
  98. /* 5px radius on the top left corner only */
  99. 	-moz-border-radius-topleft: 5px;
  100. /* 5px radius on the bottom left corner only */
  101. 	-moz-border-radius-bottomleft: 5px;
  102. /* 5px radius on the top right corner only */
  103. 	-moz-border-radius-topright: 5px;
  104. /* 5px radius on the bottom right corner only */
  105. 	-moz-border-radius-bottomright: 5px;
  106. }
  107.  
  108. KHTML (Konqueror) {
  109. /* add -khtml- in front of the CSS 3 styles */
  110. 	-khtml-border-radius: 5px;
  111. }
  112.  
  113. Webkit (Safari/Chrome) {
  114. /* add -webkit- in front of the CSS 3 styles */
  115. 	-webkit-border-top-right-radius: 5px;
  116. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.