title: Forcing child to obey parent's curved borders in CSS
body: <p>I have a div inside of another div.  <code>#outer</code> and <code>#inner</code>.  <code>#outer</code> has curved borders and a white background.  <code>#inner</code> has no curved borders and a green background.  <code>#inner</code> extends beyond the curved borders of <code>#outer</code>.  Is there anyway to stop this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
    &lt;div id="inner"&gt;&lt;/div&gt;
    &lt;!-- other stuff needs a white background --&gt;
    &lt;!-- bottom corners needs a white background --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>No matter how I try it still overlaps.  How can I make <code>#inner</code> obey and fill to <code>#outer</code>'s  borders?</p>
  <p><strong>edit</strong></p>
  <p>The following hack served the purpose for now.  But the question stands (maybe to the CSS3 and webbrowser writers): <strong>Why don't child elements obey their parent's curved borders and is there anyway to force them to?</strong></p>
  <p>The hack to get around this for my needs for now, you can assign curves to individual borders.  So for my purposes, I just assigned a curve to the top two of the inner element.</p>
  <pre><code>#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;
  }
  </code></pre>