I have the following HTML table:

<table style="width: 100%;">
<tr>
    <td class="title_bar_left_border"></td>
    <td class="title_bar_middle"></td>
    <td class="title_bar_right_border"></td>
</tr>
</table>

With the following css rules:

.title_bar_left_border
{
    BACKGROUND-IMAGE: url(tray_left.gif);
    WIDTH:  3px;
    HEIGHT: 24px;
}

.title_bar_right_border
{
    BACKGROUND-IMAGE: url(tray_right.gif);
    WIDTH:  3px;
    HEIGHT: 24px;
}

.title_bar_middle
{
    BACKGROUND-IMAGE: url(tray_middle.gif);
    WIDTH: 100%;
    BACKGROUND-REPEAT: repeat-x;
    HEIGHT: 24px;
}

Any idea why this is the result?

Instead of getting a nice table header with rounded corners you get this weird gap between the cells. Where are the gaps coming from? Besides fixing this ugly issue, I would like to understand the rationale as to why all browsers render the HTML this way.