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>

Versuch es selber!

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>

Versuch es selber!

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.