Row-rule - CSS Property

row-rule
row-rule-width
row-rule-style
row-rule-color

Summary of characteristics of the row-rule property

Quick description
Shorthand property that sets the thickness, style, and color of row separator lines, in the context of a flex container, or a grid container.
Status
Compatibility issues ⚠
Percentages
Not applicable.
Initial value
See individual properties.
Inherited by default
No.
Animation type
See individual properties.
Canonical order
Per grammar: serialization in the order of syntax.
Values can be entered in any order.
W3C Module
CSS Gap Decorations Module.
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of row-rule.

Row-rule - Syntax DiagramSyntax diagram of the row-rule CSS property. row-rule-width row-rule-width , , row-rule-syle row-rule-syle row-rule-color row-rule-colorrow-rule:;row-rule:;
Syntax diagram of the row-rule property.
Download the diagram in SVG.

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

  • row-rule is a shorthand property that brings together row-rule-width, row-rule-style, and row-rule-color. On the diagrams, these terms correspond to the syntaxes of the respective properties. Refer to their respective pages.
  • The syntax can be repeated several times with a comma as a separator.

Description of the row-rule property.

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

In a grid container, a flex container, or any other container that might display block lines, row-rule draws separating lines between the rows. You can adjust the color, style, and thickness of these lines.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
On a grid container.
.
A
B
C
D
E
F
G
H
I
J
K
L
On a flex container.
.

row-rule is a shorthand property that allows you to define the following properties in a single rule:

Defines the thickness of the line separation traits in a grid container or flex-box container context.
Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
Defines the color of the dividing lines within a grid or flex-box container.

row-rule does not insert a line before the first line or after the last one. The lines are really just line dividers and only appear between two rows.

The thickness of the line doesn't add to the one defined by row-gap.


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

Values for row-rule.

  • row-rule: 3px solid blue;

    This is the simplest syntax for row-rule: we set the values for each of the properties. These values apply to all horizontal separating lines.

    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:3px solid blue;
  • row-rule: 3px solid blue, 5px double red; row-rule: repeat(5, 5px solid blue), double;

    Several groups of values separated by commas. Each group of values applies to a separator line. If there are more lines than values, the list is reread from the beginning.

    The repeat() function is accepted and useful when the number of lines is large. 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
    row-rule:3px solid blue, 5px double red;
  • row-rule: initial; row-rule: inherit; row-rule: revert; row-rule: revert-layer; row-rule: revert-rule; row-rule: unset;
    row-rule-width: initial; (medium) row-rule-width: inherit; row-rule-width: revert; row-rule-width: revert-layer; row-rule-width: revert-rule; row-rule-width: unset;
    row-rule-style: initial; (none) row-rule-style: inherit; row-rule-style: revert; row-rule-style: revert-layer; row-rule-style: revert-rule; row-rule-style: unset;
    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;

    These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the row-rule property.

The animation of row-rule is possible. It is gradual on the values corresponding to row-rule-width and row-rule-color, and discrete (abrupt) on row-rule-style. See other examples of animation on the individual properties.

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 where you can change the value of row-rule.

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

The row-rule property is still too little known. For now (2026), only Chrome   and Edge   recognize it.

Column 1
Support for the shorthand row-rule property that sets the parameters for row separators in a grid, flexbox, etc.
Column 2
Support for the row-rule-width property, which sets the thickness of the row separators in a grid, flex-box, etc.
Column 3
Support for the row-rule-style property that sets the line style for row separators in a grid, flex-box, etc.
Column 4
Support for the row-rule-color property, which sets the color of row separators in a grid container, flexbox, etc.
1
row-rule
property
2
row-rule-width
property
3
row-rule-style
property
4
row-rule-color
property
Estimated overall support.
57%
57%
57%
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
Caniuse

Historic of the row-rule 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 Extension of the property column-rule to extend it to the setting of line separation in a grid container or a flex-box container.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about gap decorations.

The decorative lines are described in the new CSS Gap Decorations Module.. Here are the other properties listed 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.).