By Andreas Jobst Allgemein Blog CSS Design 23. Januar, 2012

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 (

) abgerundete Ecken “verpassen” kann, sondern die runden Ecken müssen auf die Zellen (
) ü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:

css3 round corner tables

Zur DEMO-Website

Datenschutz Einstellungen
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.
Privacy Policy
You have read and agreed to our privacy policy
Wird benötigt
Datenschutz Datenschutz