Posted By

Ashung on 10/11/08


Tagged

css corners RoundedCorners


Versions (?)

Who likes this?

14 people have marked this snippet as a favorite

SpinZ
jamesming
LeeRJohnson
monapdx
kolchose
lajevardi
terrencewood
Bluewall
kristinafloyd
michaJlS
Nix
bobbym245
cromozooom
pauliehaha


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


 / Published in: CSS
 

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

  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
Posted By: lsendoya on March 23, 2009

I've tried it but as opera supports borders but no rounded borders, then opera shows the normal border AND the svg rounded border. What happened? what can I do?

N.: I'm testing it in opera 9.63

You need to login to post a comment.