Table avec bords arrondis – HTML/CSS

Il est possible de créer un tableau avec des bords arrondis, ainsi que des td seul avec des bords arrondis

Attention au background-color sous le tableau qui n’est pas très bien géré

// HTML
<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

// CSS
table { border-collapse: separate; border-spacing: 0; }
td {
    border: solid 1px #000;
    border-style: none solid solid none;
    padding: 10px;
}
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

---

Source : http://jsfiddle.net/theazureshadow/LRKXD/1/