Chrome border radius and background color

Question

Similar to Chrome border color issue issue. Here is the fiddle: http://jsfiddle.net/gU52K/

I want table with specific background (white) and rounder border. In chrome, just borders work fine, borders with color - not working.

Firefox/IE output: 1,2 and 4 table are with rounded border, 3 table with cornered border.

Chrome output (latest, Version 32.0.1700.14 beta-m Aura): 1 table is with rounded border, 2 and 4 table without border at all, 3 table with cornered border.

FF output is the expected behavior, where is the problem?

HTML:

<table class="List">
    <tr><td>One</td><td>Two</td></tr>
</table>
<table class="List BG">
    <tr><td>One</td><td>Two</td></tr>
</table>
<table class="List BG Col">
    <tr><td>One</td><td>Two</td></tr>
</table>
<table class="List BG Sep">
    <tr><td>One</td><td>Two</td></tr>
</table>

CSS:

.List {
    border: 1px solid #000;
    border-radius: 10px;
}
.List.BG {
    background-color: white;
    /* border-collapse: separate; is default */
}
.List.BG.Col {
    border-collapse: collapse;
}
.List.BG.Sep {
    border-collapse: separate;
}

Answer 1

Change from

.List.BG.Col {
    border-collapse: collapse;
}

to

.List.BG.Col {
    border-collapse: separate;
}