title: Border-Radius & Box-Shadow Not Rendering Correctly
body: <p>I am trying to use box-shadow, and border-radius together on a webpage, and it is showing a white image that fills in the space where the radius is. Think of it like when you safe a "transparent" image in photoshop with a drop shadow, to a jpg, or png-8 file. </p>
  
  <p>Here is an image to show you what I mean. </p>
  
  <p>(i cant post images yet, but here is the link)
  <a href="http://i.imgur.com/jDpIH.png" rel="nofollow">http://i.imgur.com/jDpIH.png</a></p>
  
  <p>I am using this as my CSS</p>
  
  <pre><code>.whole
  {
  width: 1000px;
  margin: 0 auto;
  -webkit-box-shadow: 0px 3px 5px 2px #000000;
  -mox-box-shadow: 0px 3px 5px 2px #000000;
  box-shadow: 0px 3px 5px 2px #000000; 
  }
  
  
  .top
  {
  height: 120px;
  background-color: #1F1209;
  margin-top: 50px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  }
  
  .footer
  {
  height: 250px;
  background-color: #834C24;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  }
  </code></pre>
  
  <p>So does anyone know if there is a way I can fix this? this is happening in Firefox and IE, by the way. I havent been able to check it out in other browsers though.</p>
  
  <p>I would really prefer not to use a Photoshopped image... As CSS3 should definitely be used. </p>
  
  <p>Any thoughts on this? I would greatly appreciate any help! :) </p>
  
  <p>Thanks for your time folks! </p>