CSS-Eigenschaft column-rule-color

Die Eigenschaft column-rule-color definiert die Farbe der Regel.

Die Farbe der Regel kann auch durch die Shorthand-Eigenschaft column-rule angegeben werden.

Die Webfarben finden Sie in der Abteilung HTML-Farben. Versuchen Sie, Ihre bevorzugten Farben mit unserem Farbwähler auszuwählen.

Anfangswert	currentColor
Gilt für	Multicol-Element
Geerbt	Nein
Animierbar	Ja, die Farbe der Regel ist animierbar.
Version	CSS3
DOM Syntax	object.style.columnRuleColor = "#666";

Syntax

column-rule-color: color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;  
      -webkit-column-rule-style: dashed;
      -webkit-column-rule-color: lightgreen;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 20px;  
      -moz-column-rule-style: dashed;
      -moz-column-rule-color: lightgreen;
      column-count: 3;
      column-gap: 20px;
      column-rule-style: dashed;
      column-rule-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft column-rule-color einstellen.

Hier ist ein Beispiel, wo ein hexadezimaler Wert für die Eigenschaft column-rule-color eingestellt ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: #8ebf42;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: #8ebf42;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Ein Beispiel für die Eigenschaft column-rule-color mit einem RGB-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: double;
      -webkit-column-rule-color: rgb(234, 211, 21);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: double;
      -moz-column-rule-color: rgb(234, 211, 21);
      column-count: 3;
      column-gap: 40px;
      column-rule-style: double;
      column-rule-color: rgb(234, 211, 21);
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel für die Eigenschaft column-rule-color mit einem HSL-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: hsl(351, 97%, 57%);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: hsl(351, 97%, 57%);
      column-count: 3;
      column-gap: 30px;
      column-rule-style: solid;
      column-rule-color: hsl(351, 97%, 57%);
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
color	Der Wert definiert die Farbe der Regel. Die Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
initial	Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.