CODEWITHSUNDEEP
css
insomnia
insomnia

Reputation: 510

Border-Radius & Box-Shadow Not Rendering Correctly

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.sstatic.net/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!

Upvotes: 3

Views: 4521

Answers (3)

Sean
Sean

Reputation: 110

You probably have a background colour associated with the container.

Upvotes: 1

Bud Damyanov
Bud Damyanov

Reputation: 31889

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;

Upvotes: 0

Juvar Abrera
Juvar Abrera

Reputation: 485

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.

Upvotes: 1

Related Questions