The rule-break property.

This page is also about physical property(ies):
- column-rule-break
Defines how the column separator lines behave at intersections with the row separator lines.
- row-rule-break
Defines how the line separator traits behave at the intersections with the column separator traits.
rule-break
column-rule-break
row-rule-break

Summary of characteristics of the rule-break property

Quick description
Property that defines how the row and column gridlines behave at their intersection.
Status
Compatibility issues ⚠
Predefined values
normal | none | intersection
Percentages
Not applicable.
Initial value
spanning-item
Inherited by default
No.
Animation type
Discrète: during an animation, the rule-break 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 rule-break.

Row-rule-break - Syntax DiagramSyntax diagram of the row-rule-break CSS property. Defines how the row separator lines behave at intersections with the column separator lines. normal normal none none intersection intersectionrow-rule-break:;row-rule-break:;
Syntax of the column-rule-break property.
Download the diagram.
column-rule-break - Syntax DiagramSyntax diagram of the column-rule-break CSS property. Defines how the column separator lines behave at intersections with the row separator lines. normal normal none none intersection intersectioncolumn-rule-break:;column-rule-break:;
Syntax of the row-rule-break property.
The links in the diagram provide more details about the values.
Download the diagram.

Description of the rule-break property.

⚠
These properties are experimental. For now, only Chrome  , Edge  , and a few mobile browsers recognize them (2026).

This page describes the properties column-rule-break, row-rule-break, and rule-break. Since the syntax of these properties is the same, they are all explained on this page.
These properties apply to grid containers, flex containers, and other containers that display blocks in rows and columns. They define how the separation lines between rows and columns break when they intersect. There are two types of intersections:

T-intersections.
Cross intersections.

T-intersections happen in flex containers when the items aren't all the same size, or in grid containers when content takes up multiple cells.

rule-break applies the same value to rows and columns. It differs from shorthand properties in this respect, which allow you to freely define the values of several other properties.


See the page on rule for a summary of properties related to borders between rows or columns.

Values for rule-break.

In the grid examples, two cells were stretched over two columns and one over two rows, creating T-shaped intersections.
The line separators are blue and the column separators are red.

  • column-rule-break: normal; row-rule-break: normal; rule-break: normal;

    The separation lines stop at T-intersections, not at cross intersections. normal is the default value and also the most logical. With row-rule-break, it’s the row separation lines that are concerned, so the horizontal lines. With column-rule-break, it’s the vertical column separation lines. And with rule-break, both types of lines are concerned.

    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
    row-rule-break:normal;
    column-rule-break:none;
    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
    row-rule-break:none;
    column-rule-break:normal;


    On a flex-box container, the value normal is equivalent to none.

  • column-rule-break: none; row-rule-break: none; rule-break: none;

    The decorative nets stop neither at T-intersections, not on cross intersections.

    In the examples below, one of the properties was set to none. The other properties kept their initial value, which is normal.

    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
    row-rule-break:none;
    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
    column-rule-break:none;
    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
    rule-break:none;


    On a flex-box container:

    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-rule-break:none;
    column-rule-break:none;
  • column-rule-break: intersection; row-rule-break: intersection; rule-break: intersection;

    The separation nets stop at both T-intersections and cross intersections.

    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
    row-rule-break:intersection;
    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
    column-rule-break:intersection;
    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
    rule-break:intersection;



    On a flex-box container, only the intersection value makes a slight difference in the rendering.

    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-rule-break:intersection;
    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
    column-rule-break:intersection;
  • rule-break: initial; (spanning-item) rule-break: inherit; rule-break: revert; rule-break: revert-layer; rule-break: revert-rule; rule-break: unset;

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

Animation of the rule-break property.

These properties, of course, animate in discrete mode (sudden jump from one value to another).

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.

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

The three properties rule-break, column-rule-break, and row-rule-break are for now (2026) only recognized by Chrome   and Edge  , and a few mobile browsers.

Column 1
Browser support for the column-rule-break property, which defines how column rule lines behave at intersections with row rule lines.
Column 2
Browser support for the row-rule-break property, which defines the behavior of row separators at intersections with column separators.
Column 3
Browser support for the rule-break property.
1
columns-rule-break
property
2
row-rule-break
property
3
rule-break
property
Estimated overall support.
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

Historic of the rule-break 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-break Introduction of the properties column-rule-break, row-rule-break, and rule-break that define how the decorative lines break in a grid, a flex content, or multi-columns.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about space decorations.

The new CSS Gap Decorations Module. is packed with new properties to define the spaces between lines or columns, and especially the borders. 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.).