округленный угол с изменением цвета фона

Question

У меня есть div внутри div. Если вы посмотрите на верхний левый и верхний правый углы, вы заметите тонкую линию обесцвечивания вокруг кривой div, то есть это не цвет фона. Эта крошечная маленькая изогнутая щепка. Чем это вызвано?

В любом случае, чтобы исправить это, не снимая радиус границы?

Пожалуйста, смотрите скрипку http://jsfiddle.net/V24XB/7/

CSS выглядит следующим образом

.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; 
} 

ПРИМЕЧАНИЕ: Я в первую очередь касается IE9 +. Chrome и firefox и все остальное не имеют значения в данном конкретном случае.

Answer 1

это цвет фона .sub-области-контейнер (изменить его ГЭЭ), один из способов решить эту проблему была бы добавления коробки врезки тени для этого контейнера, как это:

box-shadow: 0px 2px 12px #888888, inset 0px 5px 0 #000; 

DEMO

вы можете удалить тег тела

Answer 2

Это немного взломанный, но вы можете попробовать заполнить фоновый цвет вашего контейнера под заголовком, если вы не хотите использовать изображение.

Просто замените ваш белый фон градиентом, заполняющим верхние 10px вашего контейнера.

Что-то, как это должно работать на 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; 
}