advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

Ashung on 10/11/08


Tagged

css corners RoundedCorners


Versions (?)


Who likes this?

10 people have marked this snippet as a favorite

SpinZ
jamesming
LeeRJohnson
monapdx
kolchose
lajevardi
terrencewood
Bluewall
kristinafloyd
michaJlS


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)

Embed | Plain TextExpand 
  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.