column-rule-color

Die CSS-Eigenschaft column-rule-color bestimmt die Farbe einer Linie zwischen Spalten in einem CSS-Mehrspaltenlayout.

Die Eigenschaft kann nicht allein wirken! Um die Farbe zu sehen, müssen wir die Linie – technisch „Regel“ genannt – zwischen den Spalten erstellen. Dazu benötigt man die Eigenschaft column-rule-style.

.columns {
  column-count: 2 600px;
  column-rule-style: solid;
  column-rule-color: #f8a100;
}

Oder wir können die Kurzschreibweiseigenschaft column-rule verwenden, die column-rule-color, column-rule-style und column-rule-width in einer einzigen Deklaration kombiniert.

column-rule: 3px solid #f8a100;

Syntax

column-rule-color nimmt einen einzelnen Farbwert entgegen. Dies kann jede gültige CSS-Farbe sein, einschließlich Hexadezimal-, RGB-, RGBa-, HSL-, HSLa- und benannter Farben. Sie akzeptiert sogar currentColor als Wert.

column-rule-color: #f8a100;
column-rule-color: hsl(39,100,49);
column-rule-color: rgb(250,162,0);
column-rule-color: aliceblue;
column-rule-color: currentColor;

Demo

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
10+	12+	3.5+	4+	3.1+	11.5+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	Nein	3.2+	Alle

Verwandte Eigenschaften

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

Spezifikation

CSS Multi-column Layout Module Level 1 (Editor’s Draft)