Posted By

brandonjp on 08/06/10


Tagged

css safari Firefox khtml CSS3 chrome webkit border-radius moz


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

erichmond
neri


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


 / Published in: CSS
 

  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  

You need to login to post a comment.