CSS3 Tabellen mit runden Ecken

Mit Hilfe von CSS3 kann man Tabellen runde Ecken und damit eine etwas abwechslungsreichere Optik verleihen. Zu beachten ist jedoch, dass man nicht einer ganze Tabelle (<table>) abgerundete Ecken “verpassen” kann, sondern die runden Ecken müssen auf die Zellen (<td>) übertragen werden, welche abgerundet erscheinen sollen. Durch Verwendung folgender CSS2-Selektoren (: first-child etc.) und der CSS3-Eigenschaften “border-radius” kann man diese vier äußeren Ecken abrunden:

table.mit_runden_ecken tr:first-child td:first-child { border-top-left-radius: 15px; }
table.mit_runden_ecken tr:first-child td:last-child { border-top-right-radius: 15px; }
table.mit_runden_ecken tr:last-child td:first-child { border-bottom-left-radius: 15px; }
table.mit_runden_ecken tr:last-child td:last-child { border-bottom-right-radius: 15px; }

Eine noch besser ausgearbeitete Lösung findet man bei Red Team Design:

Zur DEMO-Website