outline-color CSS property

Probieren Sie es aus

outline-color: red;

outline-color: #32a1ce;

outline-color: rgb(170 50 220 / 0.6);

outline-color: hsl(60 90% 50% / 0.8);

outline-color: currentColor;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

Für die Eigenschaft outline-color kann einer der folgenden Werte angegeben werden.

Werte

<color>

Die Farbe der Umrandung, angegeben als <color>.

Die Spezifikation führt außerdem den Wert auto auf, der derzeit von keinem Browser unterstützt wird. Sobald er implementiert ist, wird auto zu currentColor berechnet, es sei denn, outline-style ist auf auto gesetzt. In diesem Fall wird er zur Akzentfarbe berechnet.

Beschreibung

Eine Umrandung ist eine Linie, die außerhalb des border um ein Element gezeichnet wird. Anders als der Rahmen eines Elements wird die Umrandung außerhalb des Elementbereichs gezeichnet und kann andere Inhalte überlagern. Der Rahmen hingegen verändert das Layout der Seite, damit er Platz findet, ohne andere Inhalte zu überlagern (sofern Sie nicht ausdrücklich eine Überlagerung festlegen).

Häufig ist es einfacher, das Erscheinungsbild einer Umrandung mit der Kurzschreibweise outline festzulegen.

Barrierefreiheit

Benutzerdefinierte Fokusstile umfassen häufig Anpassungen der Eigenschaft outline. Wenn Sie die Farbe der Umrandung anpassen, sollten Sie darauf achten, dass das Kontrastverhältnis zwischen der Umrandung und dem Hintergrund, auf dem sie erscheint, hoch genug ist, damit Menschen mit eingeschränktem Sehvermögen sie erkennen können.

Eine Umrandung ist ein visueller Indikator. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, verlangt Erfolgskriterium 1.4.11: Nicht-Text-Kontrast ein Kontrastverhältnis von mindestens 3:1 zwischen der Umrandung und den angrenzenden Farben. Beachten Sie: Wenn die Umrandung als Fokusindikator dient, gehören zu den angrenzenden Farben sowohl der Hintergrund außerhalb des Elements als auch der Hintergrund des Elements selbst, sofern die Umrandung an beide angrenzt.

• WebAIM: Prüftool für Farbkontraste
• MDN: WCAG verstehen – Erläuterungen zu Richtlinie 1.4
• Erfolgskriterium 1.4.11 verstehen: Nicht-Text-Kontrast | W3C Understanding WCAG 2.2

Formale Definition

Formale Syntax

outline-color = 
  auto                  |
  <'border-top-color'>  

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

Beispiele

Eine durchgezogene blaue Umrandung festlegen

HTML

<p>My outline is blue, as you can see.</p>

CSS

p {
  outline: 2px solid; /* Set the outline width and style */
  outline-color: blue; /* Set the outline color */
  margin: 5px;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• outline
• outline-width
• outline-style
• Der Datentyp <color>
• Weitere farbbezogene Eigenschaften: color, background-color, border-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color und column-rule-color