Column-rule-color - CSS Property

column-rule-color

Summary of characteristics of the column-rule-color property

Quick description
Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
Status
Standard
Predefined values
currentcolor | transparent
Percentages
Not applicable.
Initial value
currentcolor
Inherited by default
No.
Animation type
Computed value: during an animation, the column-rule-color property gradually changes from one value to another.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Multi-column Layout Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: CR (Candidate Recommendation)

Syntax diagram of column-rule-color.

column-rule-color - Syntax DiagramSyntax diagram of the column-rule-color CSS property. Sets the color of the column separator lines. currentcolor currentcolor transparent transparent color-name color-name #xxxxxx #xxxxxx color color , ,column-rule-color:;column-rule-color:;
Syntax diagram of the column-rule-color property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

  • color-name is the name of a color (see Color chart).
  • #xxxxxx is the hexadecimal code of a color.
  • color is a color defined by one of the syntaxes recognized by CSS. See Colors.
  • The syntax can be repeated by separating the values with a comma.

Description of the column-rule-color property.

column-rule-color sets the color of the dividing lines between columns (rule) in layouts with multiple columns, grids, flex-boxes, etc.
Note: Table columns are not affected by this property.

The description of the column-rule-color property has been moved to the cross-module CSS Gap Decorations. As soon as browsers implement this feature, the property will apply to both multi-column containers and grid or flex containers.

For a more general description of the parameters of the separator line between columns, refer to the shorthand property column-rule. For a general overview of column layout options, see the page columns. For a summary on rules, see the page on rule.

Values for column-rule-color.

  • column-rule-color: currentColor;

    The color of the column separator line will be the same as the text for the element in question.

    Multi-columns
    In typography, a rule is a line of variable thickness that accompanies text or images to highlight and distinguish them, for example, to separate columns.
    column-rule-color:currentColor;
    on a multi-column container.
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-color:currentColor;
    on a flex-box container.
  • column-rule-color: transparent;

    The column separator will be transparent, meaning invisible. Since dividers don't push other elements away, it's like there's no divider at all.

    Multi-columns
    In typography, a rule is a line of variable thickness that accompanies text or images to highlight and distinguish them, for example, to separate columns.
    column-rule-color:transparent;
    on a multi-column container.
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-color:transparent;
    on a flex-box container.
  • column-rule-color: #ff8018;

    The expression of a color in one of the syntaxes recognized by CSS: hexadecimal code, color name, one of the many CSS functions, etc.

    Refer to the following pages for more details: Colors, rgb() or rgba(), hsl() or hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

    Multi-columns
    In typography, a rule is a line of variable thickness that accompanies text or images to highlight and distinguish them, for example, to separate columns.
    column-rule-color:#ff8018;
    on a multi-column container.
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-color:green;
    on a flex-box container.
  • column-rule-color: blue, red, green; ⚠ column-rule-color: repeat(4, blue), red; ⚠

    Several colors are specified. They are applied in order to the different separation lines. If there are more separation lines than colors, the list starts over from the beginning.
    You can also use the repeat() function if there are many separation lines.

    This possibility is not yet supported by Firefox   and other browsers.

    Multi-columns
    In typography, a rule is a line of variable thickness that accompanies text or images to highlight and distinguish them, for example, to separate columns.
    column-rule-color:blue, red;
    on a multi-column container.
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-color:blue,red;
    on a flex-box container.
  • column-rule-color: initial; (currentcolor) column-rule-color: inherit; column-rule-color: revert; column-rule-color: revert-layer; column-rule-color: revert-rule; column-rule-color: unset;

    See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the column-rule-color property.

Like all properties that take a color as a parameter, column-rule-color can be animated very smoothly. In this example, the color of the dividing line changes from black to white, passing through blue.
Color animation can also be done using rgb(), hsl(), etc. Check out the page for the property color for more examples of color animation.

Simulator.

The interactive example below is given for a multi-column container and for a grid container. The latter will only work on certain browsers like Chrome   or Edge  .

column-rule-color :
Multi-columns
The concept of a style sheet has been around since the very beginning of the Web: the first browser allowed documents to be formatted using what would today be considered a style sheet. Similarly, the Viola browser in 1992 and Harmony in 1993 used a similar mechanism to determine the display of fonts, colors, or text alignment. (1)

(1) Text from Wikipedia

Grid
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

Browsers compatibility with column-rule-color.

Multi-column layouts are pretty well supported by current browsers. However, the table below shows that some incompatibilities remain. That said, the column-rule-color property is properly recognized for multi-column containers. But its support for grid or flex-box containers still leaves something to be desired (2026). This isn’t shown in the table.

Column 1
Support for column layouts, including handling column breaks.
Column 2
Support for the column-rule-color property to set the color of column separator lines in a grid, flex-box, etc.

Notes:

(1) Does not support the values avoid (in the column context), avoid-column, and avoid-page for the properties break-after, break-before, and break-inside.

1
Multiple column
layout
2
column-rule-color
property
Estimated overall support.
18%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Safari

Safari sur IOS

Opéra

1

Chrome

1

Edge

1

Firefox

1

Chrome pour Androïd

1

Samsung Internet

1

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

1

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the column-rule-color property.

  • CSS Multi-column Layout Module Level 1

    This specification describes multi-column layout. It is enough to set the number of columns on the container, and the content will be arranged across the specified number of columns. Of course, other properties allow finer control over multi-column containers.
    This specification also defines properties concerning the space between columns and any possible dividing line.

    Regarding column-rule-color Introduced multi-column layouts and related properties, such as column-rule-color.
    WD
    June 23, 1999
    Working Draft.
    CR
    December 17, 2009
    Candidate Recommendation.
    PR
    REC

  • CSS Gap Decorations Module Level 1.

    This module covers the rules that define gutters between columns in a multi-column container (grid, flex-box...). It extends these possibilities to gutters between elements arranged in multiple rows, allowing these features to be used on other types of containers. Several properties define how these gutters should be drawn.

    Regarding column-rule-color The property column-rule-color was introduced in the Gap Decorations module, which will extend its use to grid and flexbox containers.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about column layouts.

Multi-column layouts are described in the specification CSS Multi-column Layout Module. The column-rule-color property is referenced in this module, as well as the terms below:

Properties:

column-count
Sets the number of columns, in a multi-column layout.
column-fill
Manages the distribution of content across columns.
⚠
column-height
Sets the height of the columns in the case of a multi-column layout. This height can be less than the height of the container, resulting in a kind of table.
column-rule
Shorthand property that defines all parameters of the separator trait between columns.
Column-rule-color
Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
column-rule-style
Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container.
column-rule-width
Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.
column-span
Langue française
Manages overlapping content across multiple columns.
column-width
Sets the width of the columns.
columns
Defines the characteristics of a multi-column layout.