Rule-color - CSS Property

rule-color

Summary of characteristics of the rule-color property

Quick description
Sets the color of the dividing lines between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows or columns.
Status
Compatibility issues ⚠
Percentages
Not applicable.
Initial value
currentcolor
Inherited by default
No.
Animation type
Computed value: during an animation, the rule-color property gradually changes from one value to another.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Gap Decorations Module.
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of rule-color.

Rule-color - Syntax DiagramSyntax diagram of the rule-color CSS property. Sets the color of the column separator lines. currentcolor currentcolor transparent transparent color-name color-name #xxxxxx #xxxxxx color color , ,rule-color:;rule-color:;
Syntax diagram of the rule-color property.
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 rule-color property.

⚠
This property is experimental. For now, Chrome   and Edge   are pretty much the only browsers that recognize it.

The property rule-color applies to grid containers, flex containers, or any other container that displays blocks in rows and columns. It sets the color of the row and column separator lines. Both types of lines get the same color. To make the lines visible, don't forget to also set rule-style.

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
Effect of rule-color on a grid container.
.
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
Effect of rule-color on a flex container.
.

rule-color is a property that allows you to set the following two properties at once, with the same color:

Defines the color of the dividing lines within a grid or flex-box container.
Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.


See the page on rule for a summary of the properties related to separating nets.

Values for rule-color.

  • rule-color: blue;

    The lines separating the rows and those separating the columns are the indicated color. The latter can be specified with any of the syntaxes recognized by CSS (see Colors).

    currentColor Sets the text color of the container. The transparent color is allowed but has no effect.

    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
    rule-color:blue;
  • rule-color: blue, red; rule-color: repeat(2, blue), red;

    Several values separated by a comma can be specified. They apply in order to each of the lines. If the number of lines is greater than the number of values, you start again at the beginning of the list.

    The function repeat() is supported. If the number of lines is large, it makes writing easier. Refer to the function description for more details on its syntax.

    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
    rule-color:blue, red;
  • rule-color: initial; (currentcolor) rule-color: inherit; rule-color: revert; rule-color: revert-layer; rule-color: revert-rule; rule-color: unset;

    Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the rule-color property.

The animation of rule-color can be done very smoothly, with the colors being treated as numbers.

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

Simulator.

The simulator shows a grid container and a flex-box container, from which you can change the value of rule-color.

rule-color :
Grille
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
Flex-box
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 rule-color.

The rule-color property is still not widely recognized. For now (2026), only Chrome  , Edge  , and a few other browsers support it.

Column 1
Support for the rule-color property that sets the color of row and column dividers in a grid, flexbox, etc.
Column 2
Support for the column-rule-color property to set the color of column separator lines in a grid, flex-box, etc.
Column 3
Support for the row-rule-color property, which sets the color of row separators in a grid container, flexbox, etc.
1
rule-color
property
2
column-rule-color
property
3
row-rule-color
property
Estimated overall support.
57%
96%
57%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

Historic of the rule-color property.

  • 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 rule-color Introduction of lines properties including ruke-color.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about gap decorations.

The new specification CSS Gap Decorations Module. brings together everything about lines between rows or columns, in the context of a container that displays blocks in rows and/or columns (grid, flex-box, etc.). Here are the other properties described in this module:

Properties:

⚠
column-rule-break
Defines how the column separator lines behave at intersections with the row separator lines.
⚠
column-rule-inset
Sets the spacing at the ends of the column separation lines (in a grid container or any other container that displays blocks in columns).
⚠
column-rule-visibility-items
Sets whether the column dividers should be shown all the time, only when there's an item next to them, or when the divider is between two items.
⚠
row-rule
Shorthand property that sets the thickness, style, and color of row separator lines, in the context of a flex container, or a grid container.
⚠
row-rule-break
Defines how the line separator traits behave at the intersections with the column separator traits.
⚠
row-rule-color
Defines the color of the dividing lines within a grid or flex-box container.
⚠
row-rule-inset
Sets the spacing at the ends of the line divider lines (in a grid container or any other container that displays blocks in columns).
⚠
row-rule-style
Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
⚠
row-rule-visibility-items
Sets whether the line separators should be shown all the time, only when there's an item next to them, or when the line is between two items.
⚠
row-rule-width
Defines the thickness of the line separation traits in a grid container or flex-box container context.
⚠
rule
Shorthand property that assigns the same values to the lines separating the rows and those separating the columns.
⚠
rule-break
Property that defines how the row and column gridlines behave at their intersection.
Rule-color
Sets the color of the dividing lines between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows or columns.
⚠
rule-inset
Check if the lines separating the rows and the ones separating the columns touch at the intersections (like in a grid container or any other container that lays out blocks in rows and columns).
⚠
rule-overlap
Define which of the lines separating the rows or the lines separating the columns go above the others.
⚠
rule-style
Sets the style for the line between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows and columns.
⚠
rule-visibility-items
Sets whether the divider lines should be shown all the time, only when there's an item next to them, or when the line is between two items.
⚠
rule-width
Sets the thickness of the lines that separate rows and columns, in the context of a container displaying blocks in rows and columns (grid, flex-box, etc.).