IE9 divs with border-radius and bleeding background-colour and border

Question

IE is showing a bleeding bg color and border on the header area for example here in IE9. The CSS is below, but I can't understand why..

#header-wrapper {
    position: relative;
    width: 98.2%;
    margin: 0 0.8%;
    overflow: hidden;
    height: 100px;
    border: 1px solid #333441;
    border-bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#E4E4E4));
    background: -moz-linear-gradient(top,  #f6f6f6,  #e4e4e4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e4e4e4');
    border-radius: 8px 8px 0 0;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
}

Any ideas would be great..

Answer 1

If available within your project constraints. I would suggest using something like bourbon , which gives you all the mixins to do what you need, with browser compatibility in mind. However, such a tool requires SASS. Which in the long run, isn't a bad idea to know / have.

Alternatively there are other tools like modernizr , that can help you in this case as well.

Moreover, you can dig into the source code CSS frameworks such as Twitter Bootstrap and grab the code they are using for border radius.

Answer 2

http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/