border-radius + background-color == cropped border

Question

Consider a div with the border-radius, border, and background-color CSS attributes applied:

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

Now consider a similar layout but with the background-color specified in an inner-div:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

I'm dismayed by the fact that the background-color of the inner <div> is obscuring the border of the outer <div>.

This is a simplified sample of the problem. In reality, I'm using a <table> as the inner element with alternating row colors. And I'm using a <div> as the outer element since border-radius does not seem to work on the <table> element. Here's a jsfiddle of a sample of this problem.

Does anyone have a suggestion for a solution?

Answer 1

Would it be acceptable to give the div a little padding? That way the background colors wouldn't conflict.