Row-rule-style - CSS Property

row-rule-style

Summary of characteristics of the row-rule-style property

Quick description
Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
Status
Compatibility issues ⚠
Predefined values
none | solid | double | dashed | dotted | groove | ridge | inset | outset
Percentages
Not applicable.
Initial value
none
Inherited by default
No.
Animation type
Discrète: during an animation, the row-rule-style property passes from one value to another without transition.
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-style.

row-rule-style - Syntax DiagramSyntax diagram of the row-rule-style CSS property. Specifies the line style for row dividers. none none hidden hidden solid solid double double dashed dashed dotted dotted groove groove ridge ridge inset inset outset outset , ,row-rule-style:;row-rule-style:;
Syntax diagram of the row-rule-style 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:

  • The syntax can be repeated by separating the values with a comma.

Description of the row-rule-style property.

⚠
This property is experimental (2026). For now, only Chrome  , Edge  , and a few other browsers handle it correctly.

row-rule-style defines the type of netting to separate lines, in a flex container, a grid container, or any other container that displays blocks in rows. These types of netting are the same as those of borders.

This property has an equivalent for columns: column-rule-style, which works the same way. Also refer to shorthand property row-rule and, for a summary on rule, to rule.

Values for row-rule-style.

  • row-rule-style: none;

    This value indicates that there is no line between the rows. It's the default value.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    X
    Z
    row-rule-style:none;
  • row-rule-style: dotted;

    Many predefined values are accepted by the property. These are the same as for borders.

    solid
    A simple line.
    double
    A double line.(1)
    dotted
    A series of dots.
    dashed
    A series of dashes.
    groove
    A line with a 3D effect: groove.(1)
    ridge
    A line with 3D effect: bump.(1)
    inset
    A line with a 3D dug effect.(2)
    outset
    A line with a 3D embossed effect.(2)

    (1) The double effect and 3D effects are only visible if the line thickness is at least 3 pixels.

    (2) The inset and outset values are poorly suited to row-rule-style, since they assume lines intersecting at right angles. When used with row-rule-style, they only lighten or darken the line color or are equivalent to groove and ridge.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    X
    Z
    row-rule-style:inset;
  • row-rule-style: dotted, dashed; row-rule-style: repeat(3, dotted), solid;

    Multiple values can be repeated by separating them with a comma. Each value is applied to a net in order. If there are more nets than values, the list is looped through again starting from the beginning.

    The repeat() function is also supported. Check out the description of this function for more information.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    X
    Z
    row-rule-style:repeat(2,dotted), double;
  • 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;

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

Animation of the row-rule-style property.

The animation of row-rule-style is necessarily discrete (discontinuous) since the property only accepts predefined values. Below is an animation of row-rule-style 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

Simulator.

This simulator is built on a flex-box container. With this simulator, you can adjust the value of row-rule-style and also play around with the dimensions of the flex container.

row-rule-style :
Flex-box
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

Browsers compatibility with row-rule-style.

For now (2026), support for row-rule-style is pretty limited: only Chrome  , Edge  , and a few other browsers recognize it.

Column 1
Support for the row-rule-style property that sets the line style for row separators in a grid, flex-box, etc.
1
row-rule-style
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-style 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-style Extension of the property column-rule-style to apply it to the row separation lines.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about gap decorations.

The newly created CSS Gap Decorations Module. sets all the properties related to decorative borders, in the context of a grid container, flex-box, or any other container that displays blocks in rows or columns. These properties are the following:

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.).