rounded corner with background image discoloration - background-image

Question

I have a div inside of a div. If you look at the top left and top right corners, you'll notice a thin line of discoloration around the curve of the div, that is, it isn't the background color. That tiny tiny little curved sliver. What is causing this?
Anyway to remedy this without having to remove the border radius?
Please see the fiddle
http://jsfiddle.net/V24XB/7/
css is as follows
.sub-area-title
{
background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
border-bottom: 1px solid #cccccc;
background-color: white;
margin: 0 auto;
color: white;
font-size: 18px;
font-weight: bold;
padding:10px 75px 10px 75px;
text-align:center;
z-index:1000;
}
.sub-area-container
{
display: inline-block;
width: auto;
min-width: 450px;
background-color: white;
min-height:100px;
max-height: 400px;
/*display:inline-block;*/
margin: 0px 15px 35px 15px;
border-left: 2px solid #6E6E6E;
border-right:2px solid #6E6E6E;
border-bottom:2px solid #6E6E6E;
border-top:2px solid #6E6E6E;
box-shadow: 0px 2px 12px #888888;
border-radius: 10px;
/*border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
max-height: 300px;
overflow-y: auto;
z-index: 1;
}
NOTE: I'm primarily concerned with IE9+. Chrome and firefox and everything else are irrelevant in this particular case

Answer 1

that's the background color of the .sub-area-container(change it an see), one way to work this out would be adding an inset box shadow to that container like this:
box-shadow: 0px 2px 12px #888888, inset 0px 5px 0 #000;
DEMO
you can remove the body tag

Answer 2

It's a bit of a hack but you could try to fill the background-color of your container under the title if you don't want to use an image.
Just replace your white background by a gradient filling the top 10px of your container.
Something like this should work on IE:
.sub-area-title
{
background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
border-bottom: 1px solid #cccccc;
background-color: white;
margin: 0 auto;
color: white;
font-size: 18px;
font-weight: bold;
padding:10px 75px 10px 75px;
text-align:center;
z-index:1000;
}
.sub-area-container
{
display: inline-block;
width: auto;
min-width: 450px;
background: -ms-linear-gradient(top, #636363 10px, #ffffff 11px, #ffffff 100%);
min-height:100px;
max-height: 400px;
/*display:inline-block;*/
margin: 0px 15px 35px 15px;
border-left: 2px solid #6E6E6E;
border-right:2px solid #6E6E6E;
border-bottom:2px solid #6E6E6E;
border-top:2px solid #6E6E6E;
box-shadow: 0px 2px 12px #888888;
border-radius: 10px;
/*border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
max-height: 300px;
overflow-y: auto;
z-index: 1;
}