Rule-overlap - CSS Property

rule-overlap

Summary of characteristics of the rule-overlap property

Quick description
Define which of the lines separating the rows or the lines separating the columns go above the others.
Status
Compatibility issues ⚠
Predefined values
row-over-column | column-over-row
Percentages
Not applicable.
Initial value
row-over-column
Inherited by default
No.
Animation type
Discrète: during an animation, the rule-overlap property passes from one value to another without transition.
Canonical order
Single: single value (no order).
W3C Module
CSS Gap Decorations Module.
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of rule-overlap.

Rule-overlap - Syntax DiagramSyntax diagram of the rule-overlap CSS property. Defines which of the column separator lines or row separator lines will be on top. row-over-column row-over-column column-over-row column-over-rowrule-overlap:;rule-overlap:;
Syntax diagram of the rule-overlap property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the rule-overlap property.

⚠
This property is experimental. It is described in the CSS Gap Decorations Module. For now, only , Firefox   and a few browser on mobile recognize it.
This page will be updated soon.

The rule-overlap property sets whether the borders separating rows or those separating columns are drawn first. In other words, it determines which ones will be visible at the intersections. This property applies to grid containers, flex-box containers, and any other container that displays blocks in rows or columns.


See the page on rule for a summary of the properties related to gap separators.

Values for rule-overlap.

  • rule-overlap: row-over-column;

    The row separator lines (blue) go over the column separator lines (red). This is the default value of the property.

    Here’s what it looks like on a grid container, and on a flexbox container.

    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
    row-overlap:row-over-column;
    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
    row-overlap:row-over-column;
  • rule-overlap: column-over-row;

    These are the column separation lines (red) that go over those of the rows (blue). It's likely that this won't work on your browser.

    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
    row-overlap:column-over-row;
    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
    row-overlap:column-over-row;
  • rule-overlap: initial; (row-over-column) rule-overlap: inherit; rule-overlap: revert; rule-overlap: revert-layer; rule-overlap: revert-rule; rule-overlap: unset;

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

Animation of the rule-overlap property.

The rule-overlap property will animate in a discrete way (sudden jump from one value to another) as soon as browsers recognize it. But the effect is barely noticeable, even with 10-pixel-thick lines like in our example.

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 lets you test the property on a grid container.

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

For now (2026), only two major browsers handle the property rule-overlap: Chrome  , Edge  , and a few mobile browsers.

Column 1
Support for the rule-overlap property, which defines whether it's the decorative borders between columns or those between rows that go on top.
1
rule-overlap
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

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Historic of the rule-overlap 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-overlap First introduction of the rule-overlap property.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

Voir aussi, à propos des décorations d'espaces.

The CSS Gap Decorations Module. groups together the properties that concern decorative borders, including those that were previously in the "CSS Multi-Column module" (like the ones whose names start with column-rule...). Here are these properties:

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