Was ist der Unterschied zwischen border-style: none; und border-style: hidden;?

Mit border-style: none; kann man Rahmenlinien verschwinden lassen, wie zum Beispiel hier in der mittleren Tabellenzelle.

Text Text Text
Text Text Text
Text Text Text

Mit border-style: hidden; passiert auf den ersten Blick genau das Selbe (funktioniert nicht im Internet Explorer 6).

Text Text Text
Text Text Text
Text Text Text

Wenn die Rahmenlinien der Tabelle aber mit border-collapse: collapse; zusammenfallen, scheint border-style: none; nicht mehr zu funktionieren. Das liegt daran, dass die ausgeblendete Rahmenlinie der mittleren Tabellenzelle durch die der vier umgebenden Tabellenzellen ersetzt wird.

Text Text Text
Text Text Text
Text Text Text

Mit border-style: hidden; verschwinden alle Rahmenlinien, auch die von den umgebenden Tabellenzellen (funktioniert nicht im Internet Explorer 6).

Text Text Text
Text Text Text
Text Text Text

Achtung: Das alles funktioniert nur mit Tabellen. Auf andere Elemente wie zum Beispiel div-Container hat border-collapse: collapse; und damit auch border-style: hidden; keinen Einfluss.

© Thiemo Mättig, created in September 2007
More CSS experiments »