advanced code snippet search

Posted By

Ashung on 10/11/08


Tagged

css corners RoundedCorners


Versions (?)


Advertising

Website Promotion DIRECTORY is a crucial factor for all websites that need to gain better organic search engine rankings and increase website traffic.
Submitting your website as part of your Web Promotion strategy to our SEO friendly and high traffic Business Directory for review is an excellent way to gain a valuable backlink and increase your websites visibility online.

Submit Site


Who likes this?

11 people have marked this snippet as a favorite

SpinZ
jamesming
LeeRJohnson
monapdx
kolchose
lajevardi
terrencewood
Bluewall
kristinafloyd
michaJlS
Nix


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)

Expand | Embed | Plain Text 
  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.

Download royalty free graphics