CSS, HTML und Javascript mit {stil}

outline • Rahmen ohne Platzanspruch

outline-offset: Abstand zwischen outline und border oder content

outline, die Umrandung, ist eine Linie um ein Element herum, die bei aller Ähnlichkeit nicht mit border zu verwechseln ist.

Die Umrandung wird außerhalb von border um das Element aufgezogen, so dass ein Element sowohl einen Rahmen mit dem CSS-Stil border als auch eine Umrandung mit dem CSS-Stil outline aufweisen kann.

outline ähnelt CSS border: Eine Linie wird um das Element aufgezogen. Anders als border erlaubt outline keine Differenzierung zwischen den Seiten des Elements. outline ist immer an allen vier Seiten gleich breit und hat überall dieselbe Farbe. Ein »outline nur unten« – outline-bottom – gibt es also nicht.

Eingabefelder in Formularen (input und Textareas) haben eine angeborene outline, wenn das Eingabefeld in den Fokus kommt. outline:none setzt die blaue Linie um Eingabefelder außer Kraft.

outline nimmt keinen Platz in Anspruch und wird nicht wie border zur Breite des Elements gerechnet.

Link A Link B
Link C Link D

Wenn die Maus über die erste Box (Link A, Link B) hovert, wird ein Rahmen durch outline sichtbar. outline benötigt keinen Platz und das Element bleibt auf seiner Position.

Wenn die Maus über die zweite Box (Link C, Link D) hovert, wird ein Rahmen durch border sichtbar. border benötigt Platz (die Breite eines Elements berechnet sich aus der angegebenen Breite width + padding + border), so dass andere Elemente verschoben werden.

outline ist eine Kurzform, die drei Eigenschaften für outline in eine CSS-Regel zusammenfasst.

a:hover { outline: 25px solid rgb(236,236,255); }
                     ^    ^           ^
                     |    |           +-- Farbe der Umrandung
                     |    +-- Stil der Umrandung
                     +-- Breite der Umrandung

outline hat kein Äquivalent zu border-radius – outline gibt es nur in eckiger Form.

outline-offset

Ohne weitere Angaben sitzt outline direkt um border herum. outline-offset schafft Abstand zwischen border und outline.

.elem { outline: 25px dotted blue; outline-offset: 15px }

hält einen gleichmäßigen Abstand von 15px von border oder dem Element.

outline-offset wird von Internet Explorer (einschl. IE11) nicht unterstützt, wohl aber von Safari, Chrome, Firefox und Opera.

outline-offset: Abstand zwischen outline und border oder contentcontentborderoutline-offsetoutline

outline für Layout-Tests

Da outline keinen Platz beansprucht, sondern sich ohne jegliche Auswirkung über benachbarte Elemente legt, ist CSS outline bestens für Layout-Tests geeignet.

CSS outline

Erblich: Nein

outline
ist die Kurzschrift und fasst alle individuellen Stylesheet-Eigenschaften der Umrandung zusammen: outline-color, outline-style und outline-width.
Werte
outline-color &| outline-style &| outline-width

CSS outline-color

Erblich: Nein

outline-color
Farbe der Umrandung fest.
Werte
color | invert | inherit
color
kann das Schlüsselwort für eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus drei RGB-Werten (255,255,255).
Werte
invert (Voreinstellung) kehrt die Hintergrundfarbe um und benutzt die invertierte Farbe als Umrandung. Auf diese Weise wird sichergestellt, dass sich die Farbe der Umrandung stets vom Hintergrund abhebt.

CSS outline-width

outline-width
Breite der Umrandung.
Werte
thin | medium | thick | length
thin, medium, thick
thin | medium | thick: Wenn Sie die Schlüsselwörter für die Rahmenbreite benutzen, bestimmen Plattform und Browser die exakte Breite der Umrandung. Die Voreinstellung ist medium.
length
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

CSS outline-style

outline-style
outline-style bestimmt die visuelle Darstellung der Umrandung, die Werte sind dieselben wie bei border-type.
Werte
none | dotted | dashed | double | groove | inset | outset | ridge | solid | inherit
none
none ist der Vorgabewert. Wenn kein Stil deklariert wird, ist keine Umrandung sichtbar, selbst wenn die outline-Eigenschaften angegeben wurden. Die Wert "none" stellt sicher, dass keine vorangegangenen Deklarationen die Umrandung beeinflussen.
dotted
erzeugt eine gepunktete Linie.
dashed
erzeugt eine gestrichelte Linie.
double
erzeugt eine doppelte durchgehende Linie.
groove
erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
inset
erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
outset
erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
ridge
erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.
solid
erzeugt eine durchgezogene Linie.
content border outline-offset outline