outline

Das outline CSS Eigenschaftskürzel setzt alle outline Eigenschaften in einer einzigen Deklaration.

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• outline-color
• outline-style
• outline-width

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Die outline Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.

<'outline-color'>

Legt die Farbe des Umrisses fest. Standardeinstellung ist die currentcolor (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe outline-color.

<'outline-style'>

Legt den Stil des Umrisses fest. Standardeinstellung ist none, wenn nicht vorhanden. Siehe outline-style (en-US).

<'outline-width'>

Legt die Dicke der Umrisslinie fest. Standardeinstellung ist medium, wenn nicht vorhanden. Siehe outline-width (en-US).

Borders und outline sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:

• Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.

• Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.

Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.

Wenn Sie outline den Wert von 0 oder none zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.

• How to Design Useful and Usable Focus Indicators

• WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible

[ <'outline-color'> || <'outline-style'> (en-US) || <'outline-width'> (en-US) ]

HTML

<a href="#">This link has a special focus style.</a>

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Ergebnis