Border-Radius & Box-Shadow Not Rendering Correctly - css

Question

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.
Here is an image to show you what I mean.
(i cant post images yet, but here is the link)
http://i.imgur.com/jDpIH.png
I am using this as my CSS
.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;
}
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.
I would really prefer not to use a Photoshopped image... As CSS3 should definitely be used.
Any thoughts on this? I would greatly appreciate any help! :)
Thanks for your time folks!

Answer 1

A little tip for you
Use this css3 for shortcuts instead of adding -left -right- top
border-radius:0px 0px 0px 0px;
<!-- [top left] [top right] [bottom right] [bottom left] -->
That would be easier if you do that.
And as for the box-shadow... I don't know why it is like that but I used this code and it works perfectly well.
box-shadow:0px 0px 10px black;
<!-- in case you don't know ... [x coordinate] [y coordinate] [size of shadow] [color] -->
Well, I don't know if these codes will work on IE because I don't use IE browser and my computer will suddenly hang for a bit but... anyways.
I rewrite one of your class css code and I hope it work.
.footer
{
height: 250px;
background-color: #834C24;
border-radius:10px 10px 10px 10px;
box-shadow:0px 0px 50px black;
}
And I think even though you don't put -webkit- and -moz-, Mozilla and Chrome will read that. I hope it works on IE, too.
Anyways... that's it. Hope that'll work.

Answer 2

You probably have a background colour associated with the container.

Answer 3

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. The syntax is:
border-radius: 1-4 length|% / 1-4 length|%;
Example 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Example 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;