title: Content boundary with rounded corners
body: <p>I am using CSS rounded corners for firefox and I have the following problem with content boundaries:</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
     &lt;style&gt;
        #outter {
              width: 200px;
              margin: auto;
              text-align: center;
              border: 1px solid #333;
              -moz-border-radius: 15px;
          }
          #inner {
              background: red;
              opacity: 0.5;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="outter"&gt;
      &lt;div id="inner"&gt;text&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Effect</strong></p>
  
  <p><a href="http://img256.imageshack.us/img256/2108/testew.png" rel="nofollow noreferrer">alt text http://img256.imageshack.us/img256/2108/testew.png</a></p>
  
  <p>I can avoid this problem by defining <code>-moz-border-radius</code> for each outter's child. There is any other way I am missing?</p>
  
  <p><strong><em>Edit</em></strong></p>
  
  <p>A harder test with multiple inner divs with different <code>background-color</code> for each one:</p>
  
  <pre><code>&lt;div id="outter"&gt;
      &lt;div id="inner1" style="background: blue"&gt;text&lt;/div&gt;
      &lt;div id="inner2" style="background: gray"&gt;text&lt;/div&gt;
      ...
      &lt;div id="innerN" style="background: yellow"&gt;text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>