rounded and shadow div (FF and Chrome)

[lyrico]

Hi to all,

I am PHP developer and found many problems regarding cross browser issue.
Here's the problem:
I want a rounded div with shadow. My CSS codes works at FF but not in google chrome. Please help. Thanks in advance.

Here's my code:

<style type='text/css'>

.main{float:none;position:relative;width:980;background:white;height:500;margin:0px auto;top:10;}

#shadowBox
{
-moz-border-radius: 1em 0em 1em 0em;
border-radius: 1em 0em 1em 0em;

-moz-box-shadow: 3px 3px 3px 5px #bbb;
-webkit-box-shadow: 3px 3px 3px 5px #bbb;
box-shadow: 3px 3px 3px 5px #bbb;
}

</style>

<div class='main' id='ShadowBox'>

</div>

[Kraai]

webkit needs a border radius as well, you only have the shadow on it. This is for the mac users using safari browsers etc.

-webkit-border-radius: 1em 0em 1em 0em;

[lyrico]

Thanks Kraai, but it doesn't work

[Kraai]

Try to use px in the place of em and see if that can work. Make it something like this:

-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
border-radius: 5px;

and

-moz-box-shadow: 3px 3px 3px 5px #bbb;
 -webkit-box-shadow: 3px 3px 3px 5px #bbb;
box-shadow: 3px 3px 3px 5px #bbb;