IE border-radius - specific part still square, despite (seemingly) valid CSS rule

I have been having problems with one div, the header of my site, which has the rule:

div#header {
width:100%;
background-color:#660066;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330033), to(#990099), color-stop(.5,#660066));
background: -moz-linear-gradient(top, #330033 0%, #660066 50%, #990099 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#330033', endColorstr='#990099',GradientType=0 );
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius:15px 15px 0px 0px;
-moz-box-shadow: 3px 0px 3px #888;
-webkit-box-shadow: 3px 0px 3x #888;
box-shadow: 3px 0px 3px #888;
}

Yet in IE9 the top left and righ开发者_高级运维t is not rounded. In Chrome, Safari and Firefox they are.

See it here (the header div contains the logo and the "CRGS Share Student File Sharing System" title)

Do you know what could be the cause? It's probably just me being a noob.

Full stylesheet here (it's messy as it's a bit of a work in progress).

Cheers in advance.

It's a bug in IE 9. It supports round borders as well as gradients but not both of them at the same time. This means that if you want the gradients, IE 9 will show that but will ignore the round corners. Alternatively what you can do however is that create a gradient image and use that for the browsers that don't understand gradients. Example:

div#header {
width:100%;
border:0px;
background-color:#660066;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330033), to(#990099), color-stop(.5,#660066));
background-image: -moz-linear-gradient(top, #330033 0%, #660066 50%, #990099 100%);
background-image: url('your gradient image.png') 0 0 repeat;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius:15px 15px 0px 0px;
-moz-box-shadow: 3px 0px 3px #888;
-webkit-box-shadow: 3px 0px 3x #888;
box-shadow: 3px 0px 3px #888;
}

Gradient will go out for rounded corners in IE9, so the best solution for now to add one extra div:

 <div class="corners"><div class="gradient"></div></div>

and hide overflow for .corners

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

I recomend this Photoshop-like tool for creating cross-browser gradients: http://www.colorzilla.com/gradient-editor/

And this one to create border-radius: http://border-radius.com/