title: Border-radius doesn't affect inner elements
body: <p>I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a <code>div</code> element that contains my header content, a <code>div</code> that contains the main content of the page, and a <code>div</code> that contains the footer. My problem is this: Since the border of my "header" <code>div</code> is not rounded, the large "container" <code>div</code> seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" <code>div</code> superimposing itself over the "container" <code>div</code>. I have an example here: <a href="http://jsfiddle.net/V98h7/" rel="noreferrer">http://jsfiddle.net/V98h7/</a>.</p>
  
  <p>I have tried rounding the border of the "header" <code>div</code> to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" <code>div</code>'s background color).
  Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.</p>
  
  <p>I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.</p>