Sass + CSSPie = pain-free cross-browser CSS3

A little bit of Sass...

@import mixins.sass

.box  
  +corners
  +shadows(#ccc)
  +vertical-gradient(#ddd, #fff)  
  h3
    color: #444
  
.dark-box
  +corners(20px)
  +shadows(#888, 4px, 4px, 4px)
  +vertical-gradient(#666, #000)
  color: #fff
  h3
    color: #fff

.box, .dark-box
  padding: 1em
  margin-bottom: 1em

...for beautiful styling...

...in fully cross-browser CSS.

.pie, .box, .dark-box {
  behavior: url(/projects/PIE.htc);
}

.box {
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-radius: 5px 5px 5px 5px;
  -moz-box-shadow: #cccccc 1px 2px 2px;
  -webkit-box-shadow: #cccccc 1px 2px 2px;
  box-shadow: #cccccc 1px 2px 2px;
  background: white ;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dddddd), color-stop(1, white));
  background: -moz-linear-gradient(center top, #dddddd 0%, white 100%);
  -pie-background:  linear-gradient(270deg, #dddddd, white);
}
.box h3 {
  color: #444444;
}

.dark-box {
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-radius: 20px 20px 20px 20px;
  -moz-box-shadow: #888888 4px 4px 4px;
  -webkit-box-shadow: #888888 4px 4px 4px;
  box-shadow: #888888 4px 4px 4px;
  background: black ;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
  background: -moz-linear-gradient(center top, #666666 0%, black 100%);
  -pie-background:  linear-gradient(270deg, #666666, black);
  color: white;
}
.dark-box h3 {
  color: white;
}

.box, .dark-box {
  padding: 1em;
  margin-bottom: 1em;
}