Row-rule-color - CSS Property

row-rule-color

Summary of characteristics of the row-rule-color property

Quick description
Defines the color of the dividing lines within a grid or flex-box container.
Status
Compatibility issues ⚠
Percentages
Not applicable.
Initial value
currentcolor
Inherited by default
No.
Animation type
Computed value: during an animation, the row-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 row-rule-color.

row-rule-color - Syntax DiagramSyntax diagram of the row-rule-color CSS property. Sets the color of the line separation nets. currentcolor currentcolor transparent transparent color-name color-name #xxxxxx #xxxxxx color color , ,row-rule-color:;row-rule-color:;
Syntax diagram of the row-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:

Description of the row-rule-color property.

⚠
This property is still experimental. For now, only a few browsers recognize it: Edge  , Chrome   for example.

row-rule-color sets the color of the line separator. These separators are found between the rows in a grid container, a flex-box container, or any other container that has rows. They sit in the space between the rows (defined by row-gap) without increasing the height.

Also refer to the equivalent property for columns: column-rule-color, and to the shorthand property row-rule. You can also check out an overview of rule.

Values for row-rule-color.

  • row-rule-color: #ff1852;

    The line between the rows will be the indicated color. This can be expressed in any of the CSS-recognized syntaxes: hexadecimal code, named color, color function, etc.

    The default value is currentColor (the text color).

    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
    row-rule-color:lightBlue;
  • row-rule-color: #ff1852, black; row-rule-color: repeat(3, red), blue, green;

    Several values can be listed, separated by a comma. Each of these values applies to one of the line separators. If there are more separators than lines, the list of values starts over from the beginning.
    The repeat() function is accepted here. Check its description for more information 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
    row-rule-color:red, blue, green;
  • row-rule-color: initial; (currentcolor) row-rule-color: inherit; row-rule-color: revert; row-rule-color: revert-layer; row-rule-color: revert-rule; row-rule-color: unset;

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

Animation of the row-rule-color property.

The property row-rule-color can be animated and the animations are smooth (like all properties that expect a color). Below, we have created the animation of row-rule-color on a 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

Simulator.

With this simulator, built on a flex-box container, you can choose a color to apply to row-rule-color and also adjust the container's dimensions.

row-rule-color :
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 row-rule-color.

The row-rule-color property is still poorly recognized: only Chrome   and Edge   browsers recognize it.

Column 1
Support for the row-rule-color property, which sets the color of row separators in a grid container, flexbox, etc.
1
row-rule-color
property
Estimated overall support.
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

Historic of the row-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 row-rule-color Extension of the property column-rule-color to apply it to spaces between lines, in a grid or a flexbox.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about space decorations.

A specification module was specially created to define the grids between rows and columns in all containers that display rows and columns: CSS Gap Decorations Module.. The following properties are set 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.).