outline

outline zeichnet einen Umriss um ein Element herum, ähnlich wie border. Der entscheidende Unterschied: Outline liegt außerhalb des Box-Modells, nimmt keinen Platz ein und verschiebt keine Nachbarelemente. Outline ist vor allem als Focus-Indikator für Tastaturnavigation bekannt. Mit outline-offset kannst du den Abstand zwischen Outline und Border steuern.

Steckbrief outline

Syntax: outline: <outline-width> <outline-style> <outline-color>
Initialwert: medium none currentcolor
Vererbt: Nein
Animierbar: Ja
Kurzform für: outline-width, outline-style, outline-color

Kategorie: Box-Modell
Werte: 7
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

Browser zeichnen automatisch einen Outline um fokussierte Elemente (Buttons, Links, Eingabefelder). Dieser Focus-Ring hilft Nutzern, die mit der Tastatur navigieren, zu erkennen, wo sie sich befinden. Outline unterscheidet sich von Border in drei wichtigen Punkten:

Nimmt keinen Platz ein: Outline verändert die Box-Größe nicht und verschiebt keine Nachbarelemente.
Folgt nicht dem border-radius: Outline war historisch immer rechteckig. Moderne Browser zeichnen Outlines mittlerweile entlang des border-radius.
Kann nicht pro Seite gesetzt werden: Es gibt kein outline-top oder outline-left. Outline umgibt immer das gesamte Element.

Syntax & Werte

7 Werte

outline-style

Wert	Beschreibung	Beispiel
`none`	Kein Outline.	outline-style: none
`solid`	Durchgezogene Linie.	outline: 2px solid #333
`dashed`	Gestrichelte Linie.	outline: 2px dashed #333
`dotted`	Gepunktete Linie.	outline: 2px dotted #333
`double`	Doppelte Linie.	outline: 4px double #333
`auto`	Browser-Standard. Oft ein spezieller Focus-Ring-Stil.	outline: auto

outline-offset

Wert	Beschreibung	Beispiel
`<length>`	Abstand zwischen dem Outline und dem Border-Edge des Elements. Negative Werte sind erlaubt.	outline-offset: 4px

Beispiele

3 Beispiele

Outline nimmt keinen Platz ein

.with-border {
  border: 3px solid #1a56db;
  padding: 16px;
  /* Border verschiebt Nachbarelemente */
}

.with-outline {
  outline: 3px solid #dc2626;
  padding: 16px;
  /* Outline verschiebt nichts */
}

<div class="demo-row">
<div>
  <div class="with-border">Border: nimmt Platz ein</div>
  <div class="after-box">Box danach</div>
</div>
<div>
  <div class="with-outline">Outline: nimmt keinen Platz ein</div>
  <div class="after-box">Box danach (gleicher Abstand)</div>
</div>
</div>

Der Browser-Standard-Focus-Ring ist funktional, aber nicht immer optisch ansprechend. Du kannst ihn anpassen, solange er sichtbar bleibt.

Custom Focus-Styles

.btn:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 3px;
}

.input-demo:focus-visible {
  outline: 3px solid #059669;
  outline-offset: 1px;
  border-color: #059669;
}

<button class="btn">Klick mich (Tab-Taste drücken)</button>
<br>
<input class="input-demo" type="text" placeholder="Eingabefeld (Tab-Taste drücken)">

:focus-visible ist besser als :focus, weil es den Outline nur bei Tastaturnavigation zeigt und nicht bei Mausklicks. So bekommen Tastaturnutzer den Focus-Ring, während Mausnutzer ihn nicht sehen.

Mit outline-offset steuerst du den Abstand zwischen dem Element und dem Outline. Positive Werte ziehen den Outline nach außen, negative nach innen.

outline-offset Werte

.offset-pos {
  outline: 3px solid #dc2626;
  outline-offset: 8px;
}

.offset-zero {
  outline: 3px solid #dc2626;
  outline-offset: 0;
}

.offset-neg {
  outline: 3px solid #dc2626;
  outline-offset: -8px;
}

<div class="offset-demo offset-pos">offset: 8px</div>
<div class="offset-demo offset-zero">offset: 0</div>
<div class="offset-demo offset-neg">offset: -8px</div>

Barrierefreiheit

Entferne niemals outline ohne Ersatz: Der Focus-Indikator ist essentiell für Tastaturnutzer, um zu wissen, wo sie sich auf der Seite befinden. outline: none ohne alternativen sichtbaren Fokus-Stil ist ein Verstoß gegen WCAG 2.4.7 Focus Visible und macht deine Website für Millionen von Menschen unbenutzbar. Wenn dir der Browser-Standard nicht gefällt, passe ihn an, aber entferne ihn nicht komplett.

Verwende :focus-visible statt :focus: :focus zeigt den Outline bei Maus- und Tastaturnutzung. :focus-visible zeigt ihn nur bei Tastaturnavigation. Das ist ein guter Kompromiss: Tastaturnutzer bekommen ihren wichtigen Fokus-Indikator, während Mausnutzer nicht von einem “hässlichen” Ring beim Klicken gestört werden. Browser-Support ist mittlerweile ausgezeichnet.

Kontrast des Focus-Indikators: Der Outline muss mindestens ein Kontrastverhältnis von 3:1 zur umgebenden Farbe haben (WCAG 2.4.11 Focus Appearance). Ein hellblauer Outline auf weißem Hintergrund ist schwer zu erkennen. Teste deinen Fokus-Stil mit einem Kontrast-Checker oder verwende dunklere Farben für bessere Sichtbarkeit.

outline-offset für bessere Sichtbarkeit: Ein kleiner positiver outline-offset (z.B. 2-4px) hebt den Fokus-Ring vom Element ab und macht ihn deutlicher erkennbar. Das ist besonders nützlich bei Elementen mit eigenem Border oder dunklem Hintergrund. Nutzer mit Sehschwächen profitieren enorm von einem klar abgesetzten Fokus-Indikator.

Dicke des Focus-Rings: Ein zu dünner Outline (1px) ist schwer zu sehen, besonders für Nutzer mit Sehschwächen. WCAG empfiehlt mindestens 2px Dicke für Fokus-Indikatoren. Moderne Design-Systeme setzen oft auf 3-4px, um maximale Sichtbarkeit zu garantieren.

Outline bei Custom-Komponenten: Wenn du interaktive Elemente wie Dropdown-Menüs oder Modals selbst baust, vergiss nicht, einen sichtbaren Fokus-Stil zu setzen. Nicht-native Elemente (<div role="button">) erben den Browser-Fokus-Stil oft nicht automatisch. Setze outline oder einen alternativen Fokus-Indikator (z.B. box-shadow) manuell.

Häufige Fehler

5 Fehler

01 outline: none ohne Ersatz

Entferne niemals den Focus-Outline, ohne einen alternativen Focus-Indikator bereitzustellen. Tastaturnutzer und Screen-Reader-Nutzer brauchen einen sichtbaren Fokus. Das ist auch ein WCAG-Verstoß (Richtlinie 2.4.7).

02 :focus statt :focus-visible

:focus zeigt den Outline auch bei Mausklicks. :focus-visible zeigt ihn nur bei Tastaturnavigation, was für die meisten Fälle besser ist.

03 Outline für Layout-Zwecke verwenden

Da Outline keinen Platz einnimmt, kann er andere Elemente überlappen. Für Rahmen, die zum Layout beitragen sollen, verwende border.

04 Annahme, dass Outline dem border-radius folgt

In älteren Browsern ist der Outline immer rechteckig. Moderne Browser runden den Outline, aber teste das bei komplexen Formen.

05 Outline-Farbe nicht kontrastreich genug

Der Focus-Outline muss einen ausreichenden Kontrast zum Hintergrund haben (WCAG: mindestens 3:1). Helle Farben auf weißem Hintergrund sind schwer zu erkennen.

Browser-Kompatibilität

5 von 5

outline und alle Einzeleigenschaften werden von allen Browsern vollständig unterstützt. outline-offset und :focus-visible sind ebenfalls breit verfügbar.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

outline wird in HTML-Emails kaum benötigt und ist schlecht unterstützt.

Apple Mail

Teilweise

Grundlegende Unterstützung
Gmail

Keine

outline wird entfernt
Outlook

Keine

outline wird ignoriert
Thunderbird

Teilweise

Grundlegende Unterstützung, outline-offset teilweise
Yahoo Mail

Keine

outline wird entfernt

Steckbrief outline

Syntax: outline: <outline-width> <outline-style> <outline-color>
Initialwert: medium none currentcolor
Vererbt: Nein
Animierbar: Ja
Kurzform für: outline-width, outline-style, outline-color

Kategorie: Box-Modell
Werte: 7
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

border

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da