W3docs
de
Anmelden

CSS outline-Eigenschaft

Die CSS-Eigenschaft outline ist eine Kurzschreibweise für outline-width, outline-style und outline-color. Werte und Beispiele ansehen.

Ein Outline ist eine Linie, die um ein Element herum gezeichnet wird, direkt außerhalb seiner Randkante. Im Gegensatz zu einem Border nimmt ein Outline keinen Platz im Layout ein und ist auf allen vier Seiten gleich — er kann nicht seitenweise eingestellt werden. Diese Seite behandelt die Kurzschreibweise outline, wie sie sich von einem Border unterscheidet und warum sie für die Tastaturzugänglichkeit wichtig ist.

Die Eigenschaft outline ist eine Kurzschreibweise, die diese Langform-Eigenschaften in einer einzigen Deklaration setzt:

  • outline-width — die Stärke der Linie.
  • outline-style — der Linienstil (solid, dashed, dotted, …). Erforderlich, damit der Outline angezeigt wird.
  • outline-color — die Linienfarbe.
  • outline-offset — der Abstand zwischen dem Outline und der Randkante. (Wird separat gesetzt; ist kein Bestandteil der Kurzschreibweise outline.)

Der Standard-Outline-Stil ist none, daher bewirkt das alleinige Setzen von outline-color nichts — es muss auch ein Stil angegeben werden. Da Outlines außerhalb des Elements gezeichnet werden und vom Box-Modell ignoriert werden, verschieben sie niemals umgebende Inhalte oder ändern die Layout-Abmessungen des Elements.

Outlines vs. Borders

Ein Outline und ein Border sehen ähnlich aus, verhalten sich jedoch unterschiedlich:

  • Layout: Ein Border ist Teil des Box-Modells und schiebt benachbarte Inhalte weg; ein Outline wird darüber gezeichnet und nimmt keinen Platz ein.
  • Seiten: Borders können seitenweise gestaltet werden (border-top, border-left, …); ein Outline ist auf allen vier Seiten stets einheitlich.
  • Form: In den meisten Browsern ist ein Outline streng rechteckig und wird nicht durch border-radius abgerundet, selbst wenn der Border es ist.
  • Position: Der Outline wird außerhalb der Randkante gezeichnet, sodass er beim Zusammentreffen beider Elemente jenseits des Borders liegt.
Anfangswertmedium none currentcolor
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein.
AnimierbarJa. Der Outline des Elements ist animierbar.
VersionCSS2
DOM-Syntaxobject.style.outline = "#eee dashed 10px";

Syntax

CSS outline

outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;

Beispiel der outline-Eigenschaft:

CSS outline Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.dotted {
        outline: dotted;
      }
      p.dashed {
        outline: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
    <p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS outline und border zusammen

Im gegebenen Beispiel ist der outline-style des ersten Elements dotted und der des zweiten Elements dashed.

Im folgenden Beispiel hat das erste Element keinen Border, das zweite hingegen schon. Beachten Sie, dass der Outline des zweiten Elements außerhalb seines Borders liegt:

Beispiel der outline-Eigenschaft mit einem Element mit Border:

CSS outline und border zusammen, Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        outline-style: solid;
        outline-width: thick;
      }
      div.ex2 {
        border: 1px solid #fc7f01;
        outline-style: solid;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
    <br />
    <div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Probier es selbst »

Im folgenden Beispiel befindet sich der Outline außerhalb des Borders des zweiten Elements.

Beispiel der outline-color-Eigenschaft mit der outline-style-Eigenschaft:

CSS outline, Farb-Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.blue {
        outline-style: solid;
        outline-color: #1c87c9;
      }
      div.green {
        border: 1px solid black;
        outline-style: solid;
        outline-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
    <br />
    <div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>
Probier es selbst »

Abstand des Outlines mit outline-offset

Standardmäßig schließt der Outline direkt an die Randkante an. Die Eigenschaft outline-offset schiebt ihn weg (oder zieht ihn bei einem negativen Wert nach innen). Sie ist eine separate Eigenschaft und kein Bestandteil der Kurzschreibweise outline:

button {
  outline: 2px solid #1c87c9;
  outline-offset: 4px; /* 4px gap between the border and the outline */
}

Outlines und Tastaturzugänglichkeit

Die wichtigste praktische Verwendung von Outlines ist der Fokusindikator. Wenn ein Benutzer mit der Tab-Taste durch eine Seite navigiert, zeichnet der Browser einen Standard-Outline um das fokussierte Element, damit er sehen kann, wo er sich befindet. Das Entfernen ohne Ersatz ist ein ernstes Zugänglichkeitsproblem:

/* Do NOT do this — keyboard users lose track of focus */
button:focus {
  outline: none;
}

Wenn der Standard-Fokusring mit Ihrem Design kollidiert, gestalten Sie ihn um, anstatt ihn zu entfernen:

button:focus-visible {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
}

Hierbei wird der Zustand :focus zusammen mit der modernen Pseudoklasse :focus-visible verwendet, die den Outline nur bei Tastaturinteraktion anzeigt — Mausklicks lösen daher keinen Ring aus, während Tastaturbenutzer die Orientierung behalten.

Werte

WertBeschreibung
outline-widthLegt die Breite des Outlines fest.
outline-styleLegt den Stil des Outlines fest.
outline-colorLegt die Farbe des Outlines fest.
outline-offsetVersetzt den Outline von der Randkante.
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft vom Elternelement.

Verwandte Eigenschaften

Übung

Übung
Was kann als wahr bezüglich der CSS outline-Eigenschaft angegeben werden?
Was kann als wahr bezüglich der CSS outline-Eigenschaft angegeben werden?
Was this page helpful?