Cannot get rounded corners on a table

Question

I have a flash website with an ugly form (constructed via a table) on it. (I need to use flash because I am using one of those template sites.)

I am trying to round the top corners of the header (title area) and the bottom corners of the footer (submit area) that works with IE too.

I have seen several websites describing how to round textboxes (or text areas) but none for tables except with graphics via photoshop. I have tried to do that, but it is apparently above my skill level because it is not working!

I have had a little luck with generateit.net which provides an html snippet. But, it is also designed for a textbox and I am getting erratic results.

I would post my webpage but I have not yet published it. I can see it on my account at the template website. Trust me, though. They are erratic. Can anyone point me to a website that can help me with html code for a table with rounded edges (without graphics)?

Thank you very much!

Answer 1

Because this question's sat, 'unanswered ¹ ,' for a while I thought I'd expand my comments as an answer:

The table element, and its valid child elements ( thead , tbody , tfoot , tr , th and td ), presumably due to the inherent nature of a table (though I have no reference to support, or explain, that assumption) refuse to accept or apply the border-radius property: JS Fiddle demo, tested in Chrome 8.x and Firefox 3.6.x on Ubuntu 10.10 .

To get around this, as @Pekka suggests, it's possible to wrap the table in a div and apply border-radius to that , along with overflow: hidden; to prevent the corners of the table appearing outside of the curved borders of the div itself.

In the demo I put together for this I used a heavier border for the containing div to reduce the antialiasing artefacts where the curved border meets the table border, but, obviously, used the same colour for both elements.

html:

<div id="container">
    <table>
        <thead>
            <tr>
                <th colspan="2">Name</th>
                <th rowspan="2">Age</th>
            </tr>
            <tr>
                <th>Family</th>
                <th>First</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">Age information from Wikipedia</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Freeman</td>
                <td>Martin</td>
                <td>39</td>
            </tr>
            <tr>
                <td>Freeman</td>
                <td>Morgan</td>
                <td>73</td>
            </tr>
        </tbody>
    </table>
</div>

css:

#container {
    border-radius: 1em;
    border: 2px solid #ccc;
    min-width: 30%;
    display: inline-block;
    overflow: hidden;
}
th, td {
    border: 1px solid #ccc;
    padding: 0.3em 1em;
    font-family: sans-serif;
}

th {
    vertical-align: top;
    font-weight: bold;
}

JS Fiddle Demo .

---

1. Outside of those posted in the comments to the question (above).