CSS-Eigenschaft outline-color

Die Eigenschaft outline-color definiert die Farbe einer Outline.

Die Eigenschaft outline-color funktioniert nicht, wenn sie allein verwendet wird. Sie muss mit den Eigenschaften outline oder outline-style verwendet werden.

Sie können hexadezimale, RGB, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft outline-color festlegen. Erfahren Sie mehr über die Farbwerte in der Abteilung HTML-Farben.

Anfangswert invert
Gilt für Alle Elemente
Geerbt Nein
Animierbar Ja, die Farbe ist animierbar.
Version CSS2
DOM Syntax object.style.outlineColor = "#8ebf42";

Syntax

outline-color: invert | color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      border: 3px solid #ccc;
      outline-style: double;
      outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline-color</h2>
    <p>Der Standardwert invert wird übernommen.</p>
  </body>
</html>

Ein weiteres Beispiel, wo hexadezimale, RGB, RGB, RGBA, HSL, HSLA Farben eingestellt sind:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .p1{
      outline-style: solid;
      outline-color: #1c87c9;
      }
      .p2{
      outline-style: solid;
      outline-color: hsl(65, 100%, 50%);
      }
      .p3{
      outline-style: solid;
      outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4{
      outline-style: solid;
      outline-color: rgb( 224, 0, 0);
      }
      .p5{
      outline-style: solid;
      outline-color: rgba(204,204,204,1);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft outline-color</h2>
    <p class="p1">Das ist ein Absatz mit hexadezimaler blauem Umriss.</p>
    <p class="p2">Das ist ein Absatz mit hsl gelbem Umriss.</p>
    <p class="p3">Das ist ein Absatz mit hsla grünem Umriss.</p>
    <p class="p4">Das ist ein Absatz mit rgb rotem Umriss.</p>
    <p class="p5">Das ist ein Absatz mit rgba grauem Umriss.</p>
  </body>
</html>

Werte

Wert Beschreibung
invert Invertiert jede Farbe, die auf den Hintergrund angewendet wird. Dieser Wert gewährleistet die Sichtbarkeit des Umrisses unabhängig von der Hintergrundfarbe. Das ist der Standardwert dieser Eigenschaft.
color Definiert die Umrissfarbe. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.5+ 1.2+ 7.0+

Übe dein Wissen

Was ist die CSS-Eigenschaft 'outline-color'?
Finden Sie das nützlich?