Obligar al niño a obedecer los bordes curvos de los padres en CSS

Tengo un div dentro de otro div. #outery #inner. #outertiene bordes curvos y un fondo blanco. #innerno tiene bordes curvos y tiene un fondo verde. #innerse extiende más allá de los bordes curvos de #outer. ¿Hay alguna manera de parar esto?

#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>

Expandir fragmento

No importa cuánto lo intente, todavía se superpone. ¿Cómo puedo hacer que #innerobedezca y llene los #outerlímites?

editar

El siguiente truco cumplió su propósito por ahora. Pero la pregunta sigue en pie (tal vez para los escritores de CSS3 y de navegadores web): ¿ Por qué los elementos secundarios no obedecen los bordes curvos de sus padres y hay alguna forma de obligarlos a hacerlo?

El truco para solucionar esto según mis necesidades por ahora es asignar curvas a bordes individuales. Entonces, para mis propósitos, simplemente asigné una curva a los dos superiores del elemento interno.

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

Sep 15 '10 12:09 Daniel Bingham

Según las especificaciones:

Los fondos de un cuadro, pero no su imagen de borde, se recortan a la curva apropiada (según lo determinado por 'clip de fondo'). Otros efectos que se recortan en el borde o borde de relleno (como "desbordamiento" que no sean "visibles") también deben recortarse en la curva. El contenido de los elementos reemplazados siempre se recorta según la curva del borde del contenido. Además, el área fuera de la curva del borde no acepta eventos del mouse en nombre del elemento.

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

Esto significa que un overflow: hiddenon #outerdebería funcionar. Sin embargo, esto no funcionará para Firefox 3.6 y versiones inferiores. Esto está solucionado en Firefox 4:

Las esquinas redondeadas ahora recortan el contenido y las imágenes (si no está configurado el desbordamiento: visible).

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

Así que aún necesitarás la solución, simplemente acórtala a:

#outer {
  overflow: hidden;
}

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

Véalo funcionando aquí: http://jsfiddle.net/VaTAZ/3/

Sep 16 '2010 06:09 Yi Jiang

Puedes simplemente usar

radio-borde: heredar;

seguir a los padres

.parent {
 width: 100px;
 height:100px;
 border:1px solid green;
 border-radius: 16px 16px 0 0;
 padding: 10px;
}
.child {
  width:100px;
  height: 100px;
  border: 1px solid red;
  background: blue;
  border-radius: inherit;
}

<div class="parent">
  <div class="child">

</div>
</div>

Expandir fragmento

Nov 15 '2022 14:11 govs

¿Qué habría de malo en esto?

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

Sep 15 '2010 06:09 Jarrett Widman

Si desea bordes afilados en la parte inferior: utilice estos:

borde-arriba-izquierdo-radio: 10px;
borde-arriba-derecha-radio: 10px;

-moz-border-radius-arriba a la izquierda
-moz-border-radius-topright

Sep 15 '2010 15:09 tdtje