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>

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;

Thanks Kraai, but it doesn't work

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;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.