Advanced Search

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)

Expand | Embed | Plain Text

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.