---
title: outline
slug: Web/CSS/outline
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Outline
  - Layout
  - Referenz
  - 'recipe:css-shorthand-property'
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>

<p>Das <strong><code>outline</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Shorthand_properties">Eigenschaftskürzel</a> setzt alle outline Eigenschaften in einer einzigen Deklaration.</p>

<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>

<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>

<h2 id="Bestandteileigenschaften"><strong class="b5">Bestandteileigenschaften</strong></h2>

<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li>
 <li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li>
</ul>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css no-line-numbers notranslate">/* 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;
</pre>

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

<div class="note">
<p><strong>Hinweis:</strong> Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: <code>none</code>. Eine bemerkenswerte Ausnahme bilden <code>input</code> Elemente, die von den Browsern als Standard-Stil vorgegeben werden.</p>
</div>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;'outline-color'&gt;</code></dt>
 <dd>Legt die Farbe des Umrisses fest. Standardeinstellung ist die <code>currentcolor</code> (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.</dd>
 <dt><code>&lt;'outline-style'&gt;</code></dt>
 <dd>Legt den Stil des Umrisses fest. Standardeinstellung ist <code>none</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.</dd>
 <dt><code>&lt;'outline-width'&gt;</code></dt>
 <dd>Legt die Dicke der Umrisslinie fest. Standardeinstellung ist <code>medium</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.</dd>
</dl>

<h2 id="Beschreibung">Beschreibung</h2>

<p><a href="/de/docs/Web/CSS/border">Borders</a> und <code>outline</code> sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:</p>

<ul>
 <li>Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.</li>
 <li>
  <p>Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.</p>
 </li>
</ul>

<p>Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren <a href="/de/docs/Web/CSS/Initialwert">Initialwert</a> gesetzt.</p>

<h2 id="Bedenken_zu_Zugänglichkeit">Bedenken zu Zugänglichkeit</h2>

<p>Wenn Sie <code>outline</code> den Wert von <code>0</code> oder <code>none</code> 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.</p>

<ul>
 <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
 <li>
  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
 </li>
</ul>

<h2 id="Formale_Definition">Formale Definition</h2>

<p>{{cssinfo}}</p>

<h2 id="Formale_Syntax">Formale Syntax</h2>

{{csssyntax}}

<h2 id="Beschreibung_2">Beschreibung</h2>

<h3 id="Verwendung_von_Umrissen_zum_Setzen_eines_Fokusstils">Verwendung von Umrissen zum Setzen eines Fokusstils</h3>

<h4 id="HTML">HTML</h4>

<div id="Using_outline_to_set_a_focus_style">
<pre class="brush: html notranslate">&lt;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">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;
}
</pre>
</div>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Keine Änderung.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Anfangsdefinition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<div>
<p>{{Compat("css.properties.outline")}}</p>
</div>