Question

How can I round the top corners of this table without losing the border?

When I set the overflow to hidden I get my rounded corners but the border is gone.

html

<table class="line-items">
    <tr class="line-item-header">
        <td class="item-summary">
            Items
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
</table>​

css

.line-items *
{   
    border:1px solid black;
}
.line-items
{
    border-radius:6px 6px 0 0;
    /*overflow:hidden;*/
    border:1px solid black;
    margin:20px;
    width:3in;
}
td
{
    padding:5px 10px;
}
.line-item-header
{
    background-color:black;
    color:white;
    font-family:arial black, arial, sans serif;
}
.line-item
{
    background-color:white;
}
.line-item:nth-child(odd)
{
    background-color:#eee;
}
body
{
    background-color:#ffd;
}​

http://jsfiddle.net/benstenson/3bvWS/1/

Answer 1

I don’t know why you need overflow: hidden. This worked for me. http://jsfiddle.net/elclanrs/3bvWS/13/

td, tr { display: block; }
tr {
    border:1px solid black;
    border-top: 0;
}
.line-item-header {
    border-radius: 6px 6px 0 0;
    ...
}