CSS outline-color-Eigenschaft

Die outline-color-Eigenschaft definiert die Farbe einer Umrandung.

Eine Umrandung ist eine Linie, die um ein Element gezeichnet wird. Sie unterscheidet sich jedoch von der border-Eigenschaft. Die width- und height-Eigenschaften eines Elements schließen die Umrandungsbreite nicht ein, da die Umrandung nicht als Teil der Abmessungen des Elements gilt.

INFO

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

Hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen können als Wert für die outline-color-Eigenschaft festgelegt werden. Weitere Informationen zu Farbwerten finden Sie im Abschnitt HTML-Farben.

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

Syntax

CSS-Syntax für outline-color

css

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

Beispiel für die outline-color-Eigenschaft:

CSS-Codebeispiel für outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS outline-color all values

Beispiel für die outline-color-Eigenschaft mit hexadezimalen, RGB, RGBA, HSL, HSLA-Farben:

CSS-Codebeispiel für alle outline-color-Werte

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>Outline-color property example</h2>
    <p class="p1">This is a paragraph with hexadecimal blue outline.</p>
    <p class="p2">This is a paragraph with hsl yellow outline.</p>
    <p class="p3">This is a paragraph with hsla green outline.</p>
    <p class="p4">This is a paragraph with rgb red outline.</p>
    <p class="p5">This is a paragraph with rgba grey outline.</p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
invert	Kehrt jede auf den Hintergrund angewendete Farbe um. Dieser Wert stellt die Sichtbarkeit der Umrandung unabhängig von der Hintergrundfarbe sicher. Dies ist der Standardwert dieser Eigenschaft.	Testen »
color	Definiert die Umrandungsfarbe. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden.	Testen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Testen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Was gilt für die outline-color-Eigenschaft in CSS?

Die outline-color-Eigenschaft in CSS dient dazu, die Farbe einer Umrandung festzulegen.Die Umrandungsfarbe kann in allen CSS-Varianten festgelegt werden.Die Umrandungsfarbe kann nur in CSS3 festgelegt werden.Sie können verschiedene Farbwerte wie RGB, HEX, HSL und sogar Farbnamen verwenden.Der Standardwert der outline-color-Eigenschaft in CSS ist 'invert'.Die Umrandungsfarbe ist immer durchgezogen und kann keine Farbverläufe verwenden.

CSS outline-color-Eigenschaft ​

Syntax ​

Beispiel für die outline-color-Eigenschaft: ​

Ergebnis ​

Beispiel für die outline-color-Eigenschaft mit hexadezimalen, RGB, RGBA, HSL, HSLA-Farben: ​

Werte ​