advanced code snippet search

Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

maltem


Rounded Corners

 / Published in: CSS
 
Expand | Embed | Plain Text 
  1. /* Standard: */
  2.  
  3. -moz-border-radius: 10px;
  4. -webkit-border-radius: 10px;
  5. border-radius: 10px; /* future proofing */
  6. -khtml-border-radius: 10px; /* for old Konqueror browsers */
  7.  
  8. /* Individual Corners: */
  9.  
  10. -moz-border-radius-topleft: 10px;
  11. -moz-border-radius-topright: 20px;
  12. -moz-border-radius-bottomright: 30px;
  13. -moz-border-radius-bottomleft: 0;
  14.  
  15. -webkit-border-top-left-radius: 10px;
  16. -webkit-border-top-right-radius: 20px;
  17. -webkit-border-bottom-right-radius: 30px;
  18. -webkit-border-bottom-left-radius: 0;
  19.  
  20. /* Shorthand: */
  21.  
  22. -moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
  23.  
  24. -moz-border-radius: 10px 20px 30px 0;
  25.  
  26. /* Elliptical Rounding (Firefox 3.5+): */
  27.  
  28. -moz-border-radius-topleft: [horizontal radius] [vertical radius];
  29.  
  30. -moz-border-radius-topleft: 10px 40px;
  31.  
  32. /* Elliptical Rounding Shorthand (Firefox 3.5+): */
  33.  
  34. -moz-border-radius: [horizontal radius] / [vertical radius];
  35.  
  36. -moz-border-radius: 10px / 40px;
  37.  
  38. -moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;
  39.  
  40. /* Above is the same as: */
  41.  
  42. -moz-border-radius-topleft: 10px 15px;
  43. -moz-border-radius-topright: 20px 30px;
  44. -moz-border-radius-bottomright: 30px 45px;
  45. -moz-border-radius-bottomleft: 40px 60px;
  46.  
  47. /* WebKit Elliptical Rounding
  48.  
  49. All corners: */
  50.  
  51. -webkit-border-radius: 36px 12px;
  52.  
  53. /* Right corners only: */
  54.  
  55. -webkit-border-top-right-radius: 50px 30px;
  56. -webkit-border-bottom-right-radius: 50px 30px;

Report this snippet  

You need to login to post a comment.