CSS table border-radius

Question

I have the following code, how could I make the table borders radius if borders are collapsed?

<table>
    <thead>
        <tr>
            <th colspan="2">Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>b1</td>
            <td>b2</td>
        </tr>
        <tr>
            <td>b3</td>
            <td>b4</td>
        </tr>
    </tbody>
</table>

I believe this is answered here: http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i — JesseEarley, Nov 26 '15 at 00:10

score 0 · Answer 1 · answered Nov 26 '15 at 00:25

Your question is a little trick but in general border-radius is just a border property that can be applied to any element that accepts borders. See example bellow:

table{
  border: 1px solid red;
  border-radius: 20px;
}

td{
  border: 1px solid green;
  border-radius: 20px;
}

<table>
    <thead>
        <tr>
            <th colspan="2">Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>b1</td>
            <td>b2</td>
        </tr>
        <tr>
            <td>b3</td>
            <td>b4</td>
        </tr>
    </tbody>
</table>

CSS table border-radius

1 Answers1