border-radius doesn't quite touch div contents

Question

So I have a rounded corner'd div created via the CSS3 "border-radius" rule. It has a child element at the top that has a background color (in this case, the same color as the border color). It's almost perfectly fine, except for the fact that they don't quite touch each other in the corner. It's visible at normal zoom, but much easier to see zoomed in:

(This screenshot was taken in the latest version of Google Chrome, but I observe the same problem in Firefox)

As a complicating factor, sometimes the .title_bar element is a table-row. How do I make that tiny gap go away?

HTML:

<div class="round_box">
    <div class="title_bar">Hello</div>
</div>

CSS:

.round_box {
    border: 2px solid #333;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.round_box .title_bar {
    background: #333;
    color: #fff;
    font-weight: bold;
    padding: 7px;
}

JsFiddle here

Answer 1

You can resolve this by removing the border, since you have a black border on a black background you can't see where one starts and the other ends!

.round_box {
   /*  border: 2px solid #333;  REMOVE THIS */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.round_box .title_bar {
    background: #333;
    color: #fff;
    font-weight: bold;
    padding: 7px;
}

Working version