Border radius not working for each row

Question

Border radius not working, when I set in table row. I want the corners of each row to be rounded.

<table style="border-spacing: 0 8px; border-collapse: separate;">
                    <tbody>
                        @foreach (var item in Model.project)
                        {
                            @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">
                            <td class="position">@item["position"]</td>                                
                            <td class="image">
                                <img src="@item["image"]" />
                            </td>
                            <td class="name">@item["name"]</td>                              
                            @:</tr>
                        }
                    </tbody>
                </table>

Answer 1

I have no idea what all of this code with @ is, I left that in the code and fixed the rest:

HTML:

<table style="border-spacing: 0 8px; border-collapse: separate;">
    <tbody>
    @foreach (var item in Model.project) {
        @:<tr>
            <td class="position">@item["position"]</td>                                
            <td class="image">
            <img src="@item["image"]" />
            </td>
            <td class="name">@item["name"]</td>                              
        @:</tr>
    }
    </tbody>
</table>

CSS:

tbody > tr td {
    background-color:grey;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

JSFiddle demo

Answer 2

Try this css for table -

table {border-collapse:separate;}
tr:first-child td:first-child {border-top-left-radius:15px;}
tr:first-child td:last-child {border-top-right-radius:15px;}
tr:last-child td:first-child {border-bottom-left-radius:15px}
tr:last-child td:last-child {border-bottom-right-radius:15px;}
td {border:1px solid #000; background-color:#ccc}