title: Nested Border Radius Problem
body: <p>I have a <code>div</code> with <code>border-radius: 20px</code> applied to it. The first element inside of said <code>div</code> is an <code>h2</code> with a background color. The <code>div's</code> radius does not affect the <code>h2</code> at all so I end up with two pointed corners sticking out of my div. I tried applying a radius to the top right and top left corners of the <code>h2</code> but this left a tiny sliver of white between the <code>div's</code> corner and the <code>h2's</code> corner. </p>
  
  <p>I tried decreasing the <code>h2</code> border radius but to completely remove the white it ends up bulging out from the <code>div</code> again....</p>
  
  <p>What am I doing wrong? Thank you for your help!</p>
  
  <p>Here's a <a href="http://jsfiddle.net/TZJCS/" rel="nofollow">jsFiddle</a></p>
  
  <p>My CSS is essentially:</p>
  
  <pre><code>#div {
  border radius: 20px;
  border: 2px solid #000;
  }
  
  #h2 {
  margin-top: 0px;
  border-radius: 20px 20px 0 0;
  }
  </code></pre>