CSS Outline

Die outline-Eigenschaft zeichnet eine Linie um ein Element – ähnlich wie border, aber ausserhalb des Box-Modells. Sie beeinflusst weder Layout noch Grösse des Elements. Am wichtigsten: outline ist die Grundlage für den Fokus-Ring, der Tastatur-Nutzenden zeigt, welches Element gerade aktiv ist.

Typische Anwendungsfälle

  • Fokus-Indikator für Tastatur-Navigation (Accessibility-Pflicht)
  • Hervorhebung ohne Layout-Verschiebung
  • Debugging – schnell Elementgrenzen sichtbar machen
  • Auswahl-Rahmen bei interaktiven Karten oder Listen

Outline-Eigenschaften

  • outline-styleLinienstil – ohne diesen bleibt outline unsichtbar
  • outline-widthDicke der Linie
  • outline-colorFarbe der Linie – Standardwert ist auto; bei einem normalen Outline-Stil entspricht das meist currentColor
  • outline-offsetAbstand zwischen Element und Outline
  • outlineKurzform für Style, Width und Color

Wichtig: Ohne outline-style (bzw. ohne die Kurzform, die einen Style enthält) bleibt die Outline unsichtbar – genau wie bei border.

1. outline-style

outline-style bestimmt das Aussehen der Linie. Die Werte entsprechen exakt denen von border-style.

  • noneKeine Outline (Standard)
  • solidDurchgezogene Linie
  • dashedGestrichelte Linie
  • dottedGepunktete Linie
  • doubleDoppelte Linie
  • groove, ridge, inset, outset3D-Effekte, abhängig von der Farbe
  • autoBrowser-eigener Fokus-Stil (kann vom Betriebssystem abweichen)
solid
dashed
dotted
double
groove
ridge
inset
outset
.solid  { outline: 3px solid deeppink; }
.dashed { outline: 3px dashed deeppink; }
.dotted { outline: 3px dotted deeppink; }
.double { outline: 6px double deeppink; }

2. outline-width

outline-width akzeptiert Längeneinheiten oder die Schlüsselwörter thin, medium (Standard) und thick.

thin
medium
thick
outline-width: thin;   /* meist 1px */
outline-width: medium; /* meist 3px, Standard */
outline-width: thick;  /* meist 5px */
outline-width: 4px;    /* exakte Werte auch möglich */

3. outline-color

Jede gültige CSS-Farbe ist erlaubt. Der Standardwert ist auto. Bei einem normalen Outline-Stil entspricht das meist currentColor – die Outline übernimmt also die aktuelle Textfarbe des Elements.

.element {
    color: darkred;
    outline: 3px solid; /* outline-color fehlt -> wird darkred */
}

4. outline-offset

outline-offset erzeugt Abstand zwischen dem Element (bzw. seinem Border) und der Outline. Anders als bei border gibt es hier auch negative Werte – die Outline rutscht dann über den Elementrand hinweg nach innen.

  • 0Outline liegt direkt am Element an (Standard)
  • positiver WertLücke zwischen Element und Outline
  • negativer WertOutline verschiebt sich nach innen, über den Inhalt
offset: 0
offset: 8px
offset: -12px
.gap    { outline: 3px solid crimson; outline-offset: 8px; }
.inward { outline: 3px solid crimson; outline-offset: -12px; }

outline und border-radius

In allen aktuellen Browsern folgt outline der abgerundeten Form von border-radius, statt eckig darüber zu liegen. Das war nicht immer so – ältere Browser zeichneten die Outline eckig, unabhängig vom border-radius des Elements.

abgerundet
.card {
    border-radius: 20px;
    outline: 4px solid darkorange;
    outline-offset: 4px;
    /* Outline ist ebenfalls abgerundet */
}

outline vs. border

Der entscheidende Unterschied: border ist Teil des Box-Modells und verändert die Grösse bzw. das Layout des Elements. outline wird darüber gezeichnet, ohne Platz zu beanspruchen – benachbarte Elemente rücken nicht zur Seite.

border
daneben
outline
daneben
.mit-border  { width: 120px; border: 15px solid teal; }
/* Element wird sichtbar breiter, Nachbar wird verdrängt */

.mit-outline { width: 120px; outline: 15px solid teal; }
/* Element bleibt gleich gross, Outline überlagert den Nachbarn */
  • borderTeil des Box-Modells, verändert Grösse/Layout, kann pro Seite unterschiedlich sein
  • outlineAusserhalb des Box-Modells, kein Einfluss auf Layout, immer rundherum gleich (keine einzelnen Seiten)

Fokus-Indikator nicht entfernen

Ein sichtbarer Fokus-Indikator zeigt Tastatur-Nutzenden, welches Element gerade ausgewählt ist. Wer outline: none oder outline: 0 verwendet, muss deshalb für einen gleichwertigen sichtbaren Ersatz sorgen. Ohne Ersatz wird der Fokus unsichtbar und die Anforderung aus WCAG 2.4.7 (Focus Visible) nicht erfüllt.

/* Nicht so: */
button:focus {
    outline: none; /* Fokus-Indikator komplett weg, für niemanden mehr sichtbar */
}

Historisch wurde outline: none oft eingesetzt, weil der native Fokus-Ring bei jedem Mausklick unschön aufblitzte – nicht nur bei Tastatur-Bedienung. Die richtige Lösung dafür ist :focus-visible, nicht das komplette Entfernen.

:focus-visible

:focus-visible zeigt den Fokus-Ring nur dann, wenn der Browser einschätzt, dass er auch wirklich gebraucht wird – typischerweise bei Tastatur-Fokus, nicht bei einem Mausklick auf einen Button.

Nurse Klick den Button oben mit der Maus (kein Ring), dann tabbe mit der Tastatur dorthin (Ring erscheint).

/* Fokus-Ring nur zeigen, wenn er sinnvoll ist */
.button:focus-visible {
    outline: 3px solid dodgerblue;
    outline-offset: 3px;
}

/* Bei Klick-Fokus ohne Tastatur: kein Ring */
.button:focus:not(:focus-visible) {
    outline: none;
}

Regel: outline: none nur zusammen mit :focus-visible als Ersatz einsetzen – niemals ohne funktionierenden Ersatz-Indikator.

Hoher Kontrast in Windows

Im Forced Colors Mode (z.B. Windows High Contrast) ersetzt das Betriebssystem viele Farben durch ein festes System-Farbschema. outline bleibt dabei zuverlässig erhalten und wird oft automatisch auf eine System-Fokusfarbe umgestellt – ein weiterer Grund, den Fokus-Ring über outline zu lösen statt z.B. nur über box-shadow oder Hintergrundfarben, die in diesem Modus verschwinden können.

Browser-Kompatibilität

  • outline-style, outline-width, outline-color, outline-offset – alle modernen Browser
  • outline folgt border-radius – alle aktuellen Browser-Versionen
  • :focus-visible – wird von modernen Browsern unterstützt. Ältere Browser ignorieren den Selektor. Deshalb sollte bei Bedarf ein sichtbarer :focus-Stil als Fallback bestehen bleiben.

Cheat Sheet

  • outline-styleLinienstil (none, solid, dashed, dotted, double, groove, ridge, inset, outset, auto)
  • outline-widththin, medium, thick oder Längeneinheit
  • outline-colorFarbe, Standardwert ist auto
  • outline-offsetAbstand zum Element, auch negativ möglich
  • outlineKurzform für Style, Width, Color
  • :focus-visibleFokus-Ring nur bei Bedarf anzeigen (i.d.R. Tastatur)

Kurz gesagt

  • outline zeichnet eine Linie ausserhalb des Box-Modells – ohne Einfluss auf Layout oder Elementgrösse.
  • Ohne outline-style bleibt die Outline unsichtbar, genau wie bei border.
  • outline-offset steuert den Abstand zum Element, auch negativ (nach innen) möglich.
  • In modernen Browsern folgt outline dem border-radius des Elements.
  • outline: none ohne Ersatz entfernt den Fokus-Indikator und verstösst gegen WCAG 2.4.7.
  • :focus-visible zeigt den Ring gezielt bei Tastatur-Fokus, nicht bei jedem Mausklick.
  • Der Fokus-Ring gehört zu den wichtigsten Accessibility-Grundlagen einer Seite – nie ersatzlos entfernen.

Nurse Die Gestaltung interaktiver Elemente zeigen Cursor und Pointer Events.