CSS outline - Äußeren Rahmen für HTML-Elemente festlegen

In CSS kann man Elementen neben den normalen Rahmen, die man für die Elemente zuweisen kann, einen weiteren, äußeren Rahmen über die Eigenschaft outline zuweisen. Solche äußeren Rahmen sind zwar ähnlich wie normale Rahmen, sie unterscheiden sich jedoch in gewissen Punkten. Beispielsweise werden sie nicht zur Größe des Elements hinzugezählt und das Element verschiebt sich dadurch nicht, da kein Platz für die Breite des Rahmens in Anspruch genommen wird. Der Rahmen "schwebt" auf der Website und dadurch kann es vorkommen, das der äußere Rahmen andere Elemente überlagert. Es ist auch keine Differenzierung bei den einzelnen Rahmenlinien möglich. Alle vier Seiten haben eine identische Rahmenbreite, -art und -farbe und abgerundete Ecken sind ebenfalls nicht möglich. Dafür müssen die Elemente nicht rechteckig sein.

Die folgenden Eigenschaften können für den äußeren Rahmen festgelegt werden.

outline-width (Rahmenbreite)
outline-style (Rahmenart)
outline-color (Rahmenfarbe)
outline-offset (Abstand)

Nachfolgend die Abbildung eines Beispielcodes.

CSS outline-width

Mit dieser Eigenschaft wird die Breite des Rahmens angegeben. Hierbei sind dieselben Werte und Einheiten möglich, wie bei einem normalen Rahmen. Diese werden unter Angabe der Rahmenbreite erläutert.

CSS outline-style

Mit der Eigenschaft outline-style wird die Art des äußeren Rahmens festgelegt. Hierbei sind ebenfalls dieselben Werte und Einheiten möglich wie beim normalen Rahmen. Sie werden unter Art des Rahmens erläutert.

CSS outline-color

Mit der Eigenschaft outline-color wird die Farbe des Rahmens festgelegt. In welcher Form die Farben angegeben werden können, werden unter Farbe des Rahmens erläutert.

CSS outline-offset

Die Eigenschaft outline-offset sorgt für einen Abstand zwischen dem äußeren Rand des Elements und dem äußeren Rahmen. Hierbei sind folgende Angaben möglich, wobei Pixel in der Regel ausreichen sollte.

<Zahl>px (Pixel)
<Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
<Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
<Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
<Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
<Zahl>vw (1vw entspricht 1% der Anzeigebreite)
<Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
<Zahl>vmin (der kleinere Wert von vw oder vh)
<Zahl>vmax (der größere Wert von vw oder vh)
<Zahl>pt (Punkt)
<Zahl>pc (Pica)
<Zahl>in (Inch)
<Zahl>mm (Millimeter)
<Zahl>cm (Zentimeter)

Kurzschreibweise mit outline

Die einzelnen Angaben müssen nicht alle einzeln angegeben werden. Es gibt die Eigenschaft outline, die zu den Shorthand-Eigenschaften zählt und mit dem die Werte für Rahmenbreite, -art und -farbe mit einem Leerzeichen getrennt angegeben werden können. Nachfolgend ist die Abbildung eines Beispiels.

Die Syntax sieht in der Kurzschreibweise die Angabe eines Werts für outline-offset nicht vor. Das kann sich in zukünftigen Spezifikationen jedoch ändern. Wenn man für outline-offset auch einen Wert angeben möchte, kann man diese nach der Eigenschaft outline angeben. Ein Beispielcode.

.selektor {
outline: 10px solid green;
outline-offset: 20px;
}

Der äußere Rahmen wird in der Praxis selten genutzt. Ein Grund hierfür ist, dass der Rahmen nicht zur Größe des Elements gerechnet wird und bei einem Abstand zum Element andere Elemente überlagert werden können.