title: CSS3 border-radius on display:table-row element
body: <p>This is my layout:</p>
  
  <pre><code>&lt;div class="divContainer"&gt;
          &lt;div class="item"&gt;
              &lt;div class="itemHeader"&gt;&lt;/div&gt;
              &lt;div class="itemBody"&gt;&lt;div&gt;
              &lt;div class="itemFlag"&gt;&lt;/div&gt;
          &lt;/div&gt;
          ....
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.divContainer{
      display:table;
      border-spacing:0 5px; //bottom spacing
      width:100%;
  }
  
  .item{
      display:table-row;
      height:45px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     border-radius:10px;
  }
  
  .itemHeader, .itemBody, .itemFlag{
      display:table-cell;
  }
  
  .itemHeader{
      width:100px;
  }
  
  .itemBody{
      width:150px;
  }
  
  .itemFlag{
      width:20px;
  
  }
  </code></pre>
  
  <p>The round borders don't appear on the <code>item</code> elements.<br>
  If I put them separately in <code>itemHeader</code> and <code>itemFlag</code> they appear.<br>
  But I'd really like to clear some code and put them in the <code>item</code></p>
  
  <p>Also can't get the radius to work on the <code>divContainer</code> class. I want a rounded container which contains rounded rows.</p>
  
  <p>What is the problem? Maybe another part of CSS is messing it up, but I don't thing that is the case.</p>