CSS-Rahmen: Nehme ich „outline“ oder „border“?

Dass man Elementen mit der CSS-Eigenschaft „border“ einen Rahmen verpassen kann, ist hinlänglich bekannt. Weiterhin existiert die Eigenschaft „outline“, die Elementen ebenfalls einen Rahmen verpasst. Beide Eigenschaften unterscheiden sich jedoch und können sogar kombiniert eingesetzt werden. Wir zeigen, wie das geht.

Outline oder Border oder beides? Echtweltbeispiel fotografiert von Navin Rajagopalan

Border und Outline: Auf den ersten Blick identisch

Erst einmal scheinen sich beide Elemente nicht zu unterscheiden. Es lassen sich jeweils Stil, Farbe und Linienstärke des Rahmens festlegen:

border-style: solid:
border-width: 1px;
border-color: red;

outline-style: solid;
outline-width: 1px;
outline-color: red;

Auch die verschiedenen Stilarten („solid“ , „dotted“ etc.) sind bei beiden Eigenschaften identisch. Der Unterschied zwischen „border“ und „outline“ liegt im Detail.

Border und Outline: Der Abstand macht den Unterschied

Während die „border“-Eigenschaft umliegende Elemente um die Breite des Rahmens verschiebt, wird bei der „outline“-Eigenschaft der Rahmen um ein Element gelegt, ohne die Positon angrenzender Elemente zu verändern. Im Zweifel verdeckt der „outline“-Rahmen umliegende Elemente.

Umrahmt man beispielsweise ein Bild mit einem 10 Pixel breiten „border“-Rahmen, so verschiebt das Bild angrenzende Elemente um jeweils 20 Pixel nach rechts und unten. Der „outline“-Rahmen jedoch führt nicht zu einer Vergrößerung des Objektes. Entsprechend bleiben die Positionen benachbarter Elemente unverändert.

oben: Bild mit CSS-Eigenschaft „border“, unten: Bild mit CSS-Eigenschaft „outline“

Bezüglich der Rahmenführung gibt es einen weiteren Unterschied, der sich derzeit jedoch nur im Opera-Browser bemerkbar macht. Während die Eigenschaft „border“ immer einen rechteckigen Rahmen darstellt, passt sich der „outline“-Rahmen den Maßen der umschlossenen Elemente an. Wird beispielswiese ein Text, der aus unterschiedlichen Schriftgrößen besteht, mit einem „outline“-Rahmen versehen, passt sich der Rahmen jeweils den Schriftgrößen an.

oben: „outline“ passt sich den Elementen an (nur in Opera), unten: „outline“ verhält sich wie „border“ (alle anderen Browser)

„border“ und „outline“ kombiniert

Die beiden Eigenschaften lassen sich auch kombinieren, wenn man ein Element mit zwei Rahmen versehen will. Beide Rahmen werden ohne Abstand zueinander dargestellt, wobei der „outline“-Rahmen logischerweise außen dargestellt wird. Auf diese Weise lassen sich – ohne Verschachtelung von Elementen – zwei Rahmen mit unterschiedlichem Stil sowie unterschiedlicher Farbe und Rahmenstärke realisieren.

Die CSS-Eigenschaften outline und border miteinander kombiniert

(dpe)