Forcer l'enfant à obéir aux frontières courbes du parent en CSS

Question

J'ai une div à l'intérieur d'un autre div. #outer et #inner. #outer a courbé des frontières et un fond blanc. #inner n'a pas de courbes frontières et sur fond vert. #inner s'étend au-delà de la courbe des frontières de l' #outer. Est-il de toute façon pour que cela cesse?

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

Avec le css:

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

Peu importe comment j'essaye toujours de chevauchements. Comment puis-je faire #inner obéir et de le remplir d' #outers'frontières?

modifier

La suite de hack a servi le but pour l'instant. Mais la question stands (peut-être pour le CSS3 et webbrowser écrivains): Pourquoi ne pas les éléments enfants d'obéir à leurs parents des courbes frontières et est-il de toute façon à force de?

Le hack pour contourner ce problème pour mes besoins pour le moment, vous pouvez attribuer des courbes individuelles des frontières. Donc, pour ma part, j'ai assigné une courbe vers le haut deux de l'intérieur de l'élément.

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

Answer 1

Selon les specs:

Une boîte origines, mais pas de son border-image, sont ramenées à l' courbe appropriée (telle que déterminée par ‘background-clip"). D'autres effets que clip de la bordure ou le bord de la marge intérieure (comme ‘débordement' autres que ‘visible') doivent également le clip de la courbe. Le contenu de remplacé les éléments sont toujours supprimés à l' contenu de bord courbe. Aussi, la région l'extérieur de la courbe de la frontière bord n'acceptons pas les événements de la souris sur le nom de l'élément.

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

Cela signifie qu'un overflow: hidden sur #outer devrait fonctionner. Toutefois, cela ne fonctionne pas pour Firefox 3.6 et ci-dessous. C'est corrigé dans Firefox 4:

Coins arrondis maintenant clip le contenu et les images (si overflow: visible n'est pas défini).

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

Ainsi, vous aurez toujours besoin de la fixer, juste raccourcir de:

#outer {
  overflow: hidden;
}

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

Le constater ici: http://jsfiddle.net/VaTAZ/3/

Answer 2

Quel serait le problème avec cela?

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

Answer 3

Si vous voulez des arêtes vives sur le bas: Utilisez celles-ci:

bord-haut-gauche-rayon: 10px;
border-top-right-radius: 10px; 

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

Answer 4

avez-vous essayé de faire la position: relative pour la div intérieure ???

C'est:

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