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)
https://i.stack.imgur.com/DpqYK.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.