How do I use CSS2 spec if browser support is not detected for CSS3?

I'm busy developing a site in HTML5 and CSS3, but I need it to support older browsers as well. It makes use of the Modernizr library but this does not allow me to replace certain CSS3 elements with CSS2.

eg: I have a div that makes use of border-radius as well as box-shadow. If CSS3 is NOT detected I want to serve an alternative style which has a background image made up 开发者_如何学Goof the rounded corners and faded borders.

Maybe something like adding an extension to the class name:

CSS3 Class - .mainContent
CSS2 Class - .mainContentFlat

---

I have a div that makes use of border-radius as well as box-shadow

Doesn't modernizr.js natively support this?

Suppose you have a div which you wanna style with id="test"

<div id="test">
    Hello HTML5 CSS3
</div>

You can give CSS like this.

div#test{
    height: 50px;
    width: 200px;
    border: 1px solid #CCC;
}

.borderradius div#test {
   border-radius: 4px 4px 0 0;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
}
.no-borderradius div#test {
    /*add style rules for css2 here*/
}
.boxshadow div#test {
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow div#test {
 /*add style rules for css2 here*/   
}

---

You must think of the css2 rules as your "base" rules and the css3 as your "prettifying" rules. In case they are in conflict, you negate the effect through css inheritance. So in the case you're mentioning you would have something like

.mainContent {
  background: #fff url(image-with-shadow-and-rounded-corners.png) top left no repeat;
}

.boxshadow.borderradius .mainContent {
  background-image: none; /*take out the background image if support for css3 exists*/
  -moz-border-radius: 5px;
  -wekbkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 5px #000;
  -wekbkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}