outline • Rahmen ohne Platzanspruch

Mar 2025

outline hebt Elemente durch eine Rahmen hervor und sitzt nicht wie border außerhalb des Elements. Aktive Eingabefelder zeigen outline automatisch. Da outline außerhalb von border um das Element aufgezogen wird, kann ein Element sowohl einen Rahmen mit border als auch mit outline zeigen.

outline – der blaue Rand um input – Formularfelder

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. outline beeinflußt die Position der umgebenden und folgenden Elemente nicht, denn die Eigenschaft zählt nicht im Box-Modell.

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, aber ist ein Rückschlag für die Barrierefreiheit: Dann sehen Benutzer nicht mehr, wo der Fokus aktuell liegt. Statt outline aus Designgründen zu unterdrücken, sollte es besser angepasst werden.

outline nimmt keinen Platz in Anspruch und wird nicht wie border zur Breite des Elements gerechnet. Das Erscheinen der blauen Linie rund um Eingabefelder verschiebt keine Elemente, aber es signalisiert dem Benutzer, dass er das Eingabefeld aktiviert hat.

outline ist eine Kurzform, die drei Eigenschaften für outline in eine CSS-Regel zusammenfasst: Breite, Style und Farbe von Outline.

input, button {
	border: 1px solid #ccc;
	border-radius: 6px;
	transition: 
		outline-offset 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
}

/* Fokuszustand weich anpassen */
input:focus, button:focus {
             ┌ Breite der Outline
             │     ┌ Style der Outline
             │     │     ┌ Farbe
             ▼     ▼     ▼
    outline: 2px solid #0077cc;
    outline-offset: 3px;
                    ▲
                    └── Abstand zur Box
	box-shadow: 0 0 12px rgba(0, 119, 204, 0.6); /* weiche Aura */
}

outline hat kein Äquivalent zu border-radius, aber es passt sich an ein Element mit abgerundeten Ecken an.

Fokusstil :focus-visible und :focus-within

:focus setzt den Fokusstil für alle Nutzer, aber :focus-visible zeigt outline nur, wenn eine Tastatur genutzt wird – nicht bei Mausklicks. So werden Mausbenutzer nicht gestört, aber für die Barrierefreiheit ist es wichtig, dass Tastaturbenutzer erkennen, wo sie sich im Dokument befinden.

input:focus-visible {
	outline: 2px solid red;
}

:focus-within: Selektiert ein Eltern-Element, wenn irgendein Kind den Fokus hat.

form:focus-within {
	outline: 2px solid cornflowerblue;
}

outline-offset

Ohne weitere Angaben sitzt outline direkt um border herum. outline-offset schafft Abstand zwischen border und outline. Ein wichtiger Unterschied zu border: Die Umrandung mit CSS outline sitzt immer um alle vier Seiten eines Element, eine Beschränkung auf eine Seite des Elements gibts nicht.

Und ein weiterer Unterschied zu border: Der Rahmen, der mit outline eingesetzt wird, zählt nicht zum Box-Modell und ändert nichts an der Position oder Größe des Elements.

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

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

outline-offset: Abstand zwischen outline und border oder content

outline für Layout-Tests

Da outline keinen Raum im Layout beansprucht, sondern sich ohne jegliche Auswirkung über benachbarte Elemente legt, ist CSS outline gut 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.