perun.net – WordPress & Webwork



CSS: border-collapse "deaktiviert" border-radius

Von am 14. 10. 2010 um 17:06 – Aktualisiert am 15. 07. 2011 um 02:06

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

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
, ,  
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 


Ein Kommentar

  1. 1.perlenigel

    Kommentar vom 04.11.2010 um 22:29

    Hmm, die border-radius-Option von CSS habe ich bis jetzt fast gar nicht genutzt. Das liegt aber vor allem daran, dass die Ecken im Firefox lange Zeit pixelig aussahen und im Internet Explorer gar nicht angezeigt wurden. Inzwischen siehts im Firefox 3.6 aber ordentlich aus – runde Ecken so zu erzeugen, wäre natürlich etwas einfacher als 8 Einzelbilder :wink:.

Hinweis:
300+ Professionelle WordPress-Themes
Premium WordPress-Themes, 38 davon mit deutschem Support

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.