Принуждение ребенка подчиняться родительским кривым границам в CSS

У меня есть div внутри другого div. #outer и #inner. #outer имеет изогнутые границы и белый фон. #inner не имеет изогнутых границ и зеленого фона. #inner выходит за пределы кривых границ #outer. В любом случае, чтобы остановить это?

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }

 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>

Ответ 1

Согласно спецификациям:

Фреймы, но не border-image, привязаны к соответствующая кривая (как определено "Фон-клип). Другие эффекты, которые клип к границе или кромке (например," переполнение, отличное от "Видимый" ) также должен быть привязан к кривая. Содержание заменены элементы всегда обрезаются до кривая края содержимого. Кроме того, область вне кривой пограничного края не принимает события мыши от имени элемента.

http://www.w3.org/TR/css3-background/#the-border-radius

Это означает, что должен работать overflow: hidden on #outer. Однако это не будет работать для Firefox 3.6 и ниже. Это исправлено в Firefox 4:

Закругленные углы теперь обрезают содержимое и изображения (если переполнение: видимое не установлено).

https://developer.mozilla.org/en/CSS/-moz-border-radius

Итак, вам все равно потребуется исправление, просто сократите его до:

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

Посмотрите, как это работает: http://jsfiddle.net/VaTAZ/3/

Ответ 2

Если вам нужны острые края внизу: Используйте их:

border-top-left-radius: 10px;
border-top-right-radius: 10px; 

-moz-border-radius-topleft
-moz-border-radius-topright

Ответ 3

Что было бы неправильно с этим?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

Ответ 4

Вы пытались сделать положение: относительное для внутреннего div???

то есть:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}