Die Eigenschaften des Rahmens

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Die Rahmeneigenschaften sind komplexer als die Eigenschaften padding oder margin, da sie sich nicht nur auf die Abstände zwischen den Objekten auswirken, sondern auch auf das Erscheinungsbild dieses Abstands. Normalerweise ist ein Rahmen sichtbar. Seine Eigenschaften werden auf ähnliche Weise gesetzt wie die Eigenschaften der Ränder, es gibt aber ein paar entscheidende Unterschiede.

Der Rahmen, der Innen- vom Außenrand voneinander trennt, besitzt die Eigenschaften Stil, Breite und Farbe. In der Grundeinstellung ist der Stil mit dem Wert none, die Breite mit medium (Anmerkung: Netscape 4 weicht hier von anderen Browsern ab und legt die Grundeinstellung für Rahmen auf 0 fest. Es wird somit kein Rahmen dargestellt, wenn er nicht ausdrücklich definiert wird.) und die Farbe mit dem vorgegebenen Farbwert des umrahmten Elements definiert.

Für die Eigenschaft border-style, die für die Darstellungsform des Rahmens steht, gibt es eine ganze Reihe an möglichen Einstellungen. Die folgende Tabelle zeigt die entsprechenden Werte und ihre Unterstützung durch die wichtigsten Browser.

Tabelle: Darstellungsarten für Rahmen in CSS.

Der Wert hidden ist gleichbedeutend mit dem Wert none, es sei denn, er wird in HTML-Tabellen eingesetzt. Der Rahmen bleibt damit unsichtbar. Alle Informationen zu den Rahmenwerten finden Sie unter Referenz der CSS-Eigenschaften.

Die W3C-Spezifikation legt nicht genau fest, wie die verschiedenen Darstellungsformen im Browser auszusehen haben. Es überrascht daher nicht, dass sich das Ergebnis mit verschiedenen Browserversionen und Betriebssystemen unterscheiden kann. Aber genauso wie für andere Rahmeneigenschaften gilt im Allgemeinen, dass die Browser diese Eigenschaften vorhersehbar, zufriedenstellend und vernünftig darstellen.

Die Rahmenbreite kann entweder mit den vier einzelnen Eigenschaften border-top-width, border-right-width, border-bottom-width und border-left-width oder mit der zusammenfassenden Eigenschaft border-width festgelegt werden. Definieren kann man die Rahmenbreite entweder mit relativen oder absoluten Maßeinheiten (wie Pixel, em, Prozentwerten oder Zoll) oder mit den in CSS vorgegebenen Werten thin, medium und thick. Diese werden zwar nicht von allen Browsern auf die gleiche Weise interpretiert, ihre Darstellung unterscheidet sich aber nur gering mit einer Abweichung von bis zu einem Pixel.

Konkrete Maße für Rahmen
Für eine exakte Angabe der Rahmenbreite verwendet man am besten Pixelangaben. Das ist die wichtigste Maßeinheit in pixelgenauen Layouts, in denen die Eigenschaft border-width eine wichtige Rolle spielen kann.

Die Farbe eines Rahmens kann mit Hilfe der zusammenfassenden Eigenschaft border-color oder mit den einzelnen Eigenschaften border-top-color, border-right-color, border-bottom-color und border-left-color zugewiesen werden.

Wie wir aus Wie man Farben bestimmt wissen, kann für die Farbe ein hexadezimaler RGB-Code (#ff9900), ein abgekürzter RGB-Code (#f90), der numerische RGB-Code (rgb (102, 153, 0)) oder ein Standardfarbname (red) eingesetzt werden.

Den Kurzformen von border-style, border-width und border-color können auch mehrere Werte zugewiesen werden.

Es gibt noch eine zusätzliche Kurzform, die wahrscheinlich am häufigsten von allen benutzt wird. Mit der border-Eigenschaft können Sie die Rahmenart, die Breite und die Rahmenfarbe für alle vier Seiten eines Objekts auf einmal setzen. Meistens werden Sie Rahmen mit vier gleichen Seiten benötigen und es gibt keinen einfacheren Weg als mit dieser Kurzform.

Die folgende Stilregel erzeugt für alle vier Seiten einen gleichmäßigen, 3 Pixel breiten, roten Rahmen um ein beliebiges Element der Klasse warning: