CSS Rounded Corners without images support Firfox, Safari, Chrome, Opera


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

CSS Rounded Corners without images
support: Firfox 2-3, Safari, Chrome, Opera 9.5(use svg)


Copy this code and paste it in your HTML
  1. = HTML ==================================================
  2. <div class="roundedbox">...</div>
  3.  
  4. = CSS ===================================================
  5. .roundedbox {
  6. width: 100px;
  7. height: 100px;
  8. background: #666;
  9. -webkit-border-radius: 5px;
  10. /*
  11.   -webkit-border-top-left-radius:5px;
  12.   -webkit-border-top-right-radius:5px;
  13.   -webkit-border-bottom-right-radius:5px;
  14.   -webkit-border-bottom-left-radius:5px;
  15.   */
  16. -moz-border-radius: 5px;
  17. /*
  18.   -moz-border-radius-topleft:5px;
  19.   -moz-border-radius-topright:5px;
  20.   -moz-border-radius-bottomright:5px;
  21.   -moz-border-radius-bottomleft:5px;
  22.   */
  23. border-radius: 5px;
  24. /*
  25.   border-top-left-radius:5px;
  26.   border-top-left-radius:5px;
  27.   border-bottom-right-radius:5px;
  28.   border-bottom-left-radius:5px;
  29.   */
  30. }
  31. /*= CSS hack for Opera 9.5 Rounded Corners */
  32. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  33. .roundedbox {
  34. background:transparent url(shadow.svg);
  35. }
  36. }
  37.  
  38. = SVG file ==============================================
  39. <?xml version="1.0">
  40. <svg xmlns="http://www.w3.org/2000/svg">
  41. <rect x="0" y="0" width="100%" height="100%" rx="5" style="fill:#666666;" />
  42. </svg>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.