outline

Zuletzt aktualisiert am 15. Februar 2026

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.

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:

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

Syntax & Werte

outline-style

outline-offset

Beispiele

Outline vs. Border

.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>

Custom Focus-Styles

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

.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.

outline-offset

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

.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

• 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).
• :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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften