CSS: border-collapse “deaktiviert” border-radius

Für manche neu, für andere olle Kamelle: aber die Deklaration border-collapse: collapse; deaktiviert die abgerundeten Ecken, die man durch CSS3 erreichen will. Dabei werden sowohl die “offizielle” Eigenschaft (border-radius) als auch die browserspezifischen Eigenschaften (zum Beispiel -moz-border-radius) übergangen.

Siehe auch CSS Backgrounds and Borders Module Level 3 von W3C.

Der Hintergrund der ganzen Sache ist, dass ich letztens vor hatte auch den Tabellen im Artikel Tastaturkürzel für schnelleres Schreiben im WordPress-Editor abgerundete Ecken zu spendieren, so wie ich es schon hier im Artikel CSS3 und abgerundete Ecken beschrieben habe.

Aber um den Tabellen nicht nur außen sondern auch zwischen den Zellen einen Rahmen zu spendieren, muss man entweder sowohl der Tabelle als auch den einzelnen Zellen Angaben zum Rahmen spendieren, zum Beispiel:

table, th, td {
    border: 1px solid #b2b2b2;
}

Um aber die doppelten Rahmen zu entfernen muss border-collapse: collapse; einsetzen, das verhindert, wie schon erwähnt die abgerundete Ecken. Um dennoch mit CSS3 abgerundete Ecken zu realisieren muss man auf Trick 17 zurückgreifen. Zuerst spendiert man der gesamten Tabelle einen Rahmen oben und links:

table {
    border-top: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2;
}

Anschließend bekommen alle Tabellenzellen rechts und unten einen Rahmen:

th, td {
    border-right: 1px solid #b2b2b2;
    border-bottom: 1px solid #b2b2b2;
}

Dann bekommt die Tabelle auf allen Seiten abgerundete Ecken:

table{
    -moz-border-radius: 3px; 
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

Und die letzte Zelle in der letzten Zeile eine Abrundung rechts unten:

tr:last-child td:last-child {
    -moz-border-radius: 0 0 3px 0;
    -khtml-border-radius: 0 0 3px 0;
    -webkit-border-radius: 0 0 3px 0;
    border-radius: 0 0 3px 0;
}

Foortgeschrittene CSS-Techniken kaufen * — CSS-Buch *

Das tr:last-child ist notwendig, damit es sicher wird, dass auch wirklich die absolut letzte Zelle, die Abrundung bekommt, da es innerhalb von größeren Tabellen auch üblicherweise mehrere Zeilen gibt und sich das td:last-child pro Zeile bezieht.

Das wär’s. Das Ganze funktioniert logischerweise nur auf Browsern, die entweder die Eigenschaft border-radius oder das entsprechende browserspezifische Gegenstück (zum Beispiel -moz-border-radius) verstehen. Momentan sind das die aktuellen Versionen von Gecko (Firefox, SeaMonkey & Co), Webkit (Safari, Google Chrome), Opera und der Internet Explorer 9.

* = Partnerlink

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.