Propriété rule-break.

Cette page concerne aussi les propriété(s) physique(s) :
- column-rule-break
Définit comment se comportent les filets de séparation des colonnes aux intersections avec les filets de séparation des lignes.
- row-rule-break
Définit comment les filets de séparation des lignes se comportent au niveau des intersection avec les traits de séparation des colonnes.
rule-break
column-rule-break
row-rule-break

Résumé des caractéristiques de la propriété rule-break

Description rapide
Propriété qui définit comment se comportent les filets de séparation des lignes et des colonnes à leur intersection.
Statut
Problèmes de compatibilité ⚠
Valeurs prédéfinies
normal | none | intersection
Pourcentages
Ne s'appliquent pas.
Valeur initiale
spanning-item
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété rule-break passe d'une valeur à l'autre sans transition.
Ordre canonique
Per grammar : sérialisation dans l'ordre de la syntaxe.
Module W3C
Module CSS - Décorations des espaces.
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de 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:;
Syntaxe de la propriété column-rule-break.
Télécharger le schéma.
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:;
Syntaxe de la propriété row-rule-break.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma.

Description de la propriété rule-break.

⚠
Ces propriétés sont expérimentales. Pour l'instant seuls Chrome  ,Edge   et quelques navigateurs sur mobile les reconnaissent (2026).

Cette page décrit les propriété column-rule-break, row-rule-break et rule-break. La syntaxe de ces propriétés étant la même, elles sont toutes décrites sur cette page.
Ces propriétés s'appliquent aux conteneurs grille, aux conteneurs flex, et aux autres conteneurs faisant apparaître des blocs en lignes et en colonnes. Elles définissent comment se coupent les traits de séparation entre lignes et colonnes lorsqu'il se croisent. On distingue deux sortes de croisement :

Les intersections en T.
Les intersections en croix.

Les intersections en T se rencontrent dans les conteneurs flex, lorsque les éléments n'ont pas tous le même taille, ou dans les conteneurs grille lorsque du contenu occupe plusieurs cellules.

rule-break applique la même valeur aux lignes et aux colonnes. Elle diffère en cela des propriétés résumées qui permettent elles, de définir librement les valeurs de plusieurs autres propriétés.


Voyez la page sur rule pour une synthèse des propriétés relatives aux filets entre lignes ou colonnes.

Valeurs pour rule-break.

Sur les exemples de grille, deux cellules ont été étendues sur deux colonnes et une sur deux lignes, créant ainsi des intersections en T.
Les filets de séparation des lignes sont bleus et ceux de séparation de colonnes sont rouges.

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

    Les filets de séparation s'arrêtent aux intersections en T, pas aux intersections en croix. normal est la valeur initiale et aussi la plus logique. Avec row-rule-break ce sont les filets de séparation des lignes qui sont concernés, donc les filets horizontaux. Avec column-rule-break ce sont les filets de séparation verticaux de séparation des colonnes. Et avec rule-break les deux types de filet sont concernés.

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


    Sur un conteneur flex-box la valeur normal est équivalente à none.

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

    Les filets de décoration ne s'arrêtent ni aux intersections en T, ni aux intersections en croix.

    Sur les exemples ci-dessous, l'une des propriétés a été fixée à none. Les autres propriétés ont conservé leur valeur initiale, à savoir normal.

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


    Sur un conteneur flex-box :

    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;

    Les filets de séparation s'arrêtent aussi bien aux intersections en T qu'aux intersections en croix.

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



    Sur un conteneur flex-box, seule la valeur intersection apporte une légère différence dans le rendu.

    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;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemple d'animation de rule-break.

Ces propriétés s'animent bien sûr en mode discrete (passage brutal d'une valeur à l'autre).

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

Exemple interactif avec la propriété rule-break.

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

Compatibilité des navigateurs avec rule-break.

Les trois propriétés rule-break, column-rule-break et row-rule-break ne sont pour l'instant (2026) reconnues que par Chrome   et Edge  , et quelques navigateurs sur mobile.

Colonne 1
Support par les navigateurs de la propriété column-rule-break, qui définit comment les filets de séparation des colonnes se comportent aux intersections avec les filets de séparation des lignes.
Colonne 2
Support par les navigateurs de la propriété row-rule-break qui définit le comportement des filets de séparation des lignes aux intersections avec ceux des colonnes.
Colonne 3
Support par les navigateurs de la propriété rule-break.
1
Propriété
columns-rule-break
2
Propriété
row-rule-break
3
Propriété
rule-break
Estimation de la prise en charge globale.
57%
57%
57%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Histoire de la propriété rule-break.

  • Module CSS - Décoration des espaces - Niveau 1.

    Ce module reprend les règles qui définissent les filets entre les colonnes dans un conteneur multi-colonnes (grille, flex-box, etc.). Il étend ces possibilités aux filets entre les éléments disposés sur plusieurs lignes, ce qui permet d'utiliser ces fonctionnalités sur d'autres types de conteneurs. Plusieurs propriétés définissent comment ces filets doivent être dessinés.

    Concernant rule-break Introduction des propriétés column-rule-break, row-rule-break et rule-break qui définissent comment se coupent les traits de décoration dans un grille, un contenu flex ou multi-colonnes.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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

Le nouveau module CSS - Décorations des espaces. regorge de nouvelles propriétés pour définir les espaces entre lignes ou colonnes, et plus particulièrement les filets. Voici ces propriétés :

Propriétés :

Column-rule-break
Définit comment se comportent les filets de séparation des colonnes aux intersections avec les filets de séparation des lignes.
⚠
column-rule-inset
Définit l'espacement aux extrémités des filets de séparation des colonnes (dans un conteneur grille ou tout autre conteneur faisant apparaître des blocs en colonnes).
⚠
column-rule-visibility-items
Définit si les traits de séparation des colonnes doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.
⚠
row-rule
Propriété résumée qui définit l'épaisseur, le style et la couleur des filets de séparation des lignes, dans le contexte d'un conteneur flex ou d'un conteneur grid.
Row-rule-break
Définit comment les filets de séparation des lignes se comportent au niveau des intersection avec les traits de séparation des colonnes.
⚠
row-rule-color
Définit la couleur des filets de séparation des lignes dans le contexte d'un conteneur grille ou d'un flex-box.
⚠
row-rule-inset
Définit l'espacement aux extrémités des filets de séparation des lignes (dans un conteneur grille ou tout autre conteneur faisant apparaître des blocs en colonnes).
⚠
row-rule-style
Définit le style de trait à utiliser pour le filet séparant les lignes, dans le contexte d'un conteneur grille ou d'un conteneur flex-box.
⚠
row-rule-visibility-items
Définit si les traits de séparation des lignes doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.
⚠
row-rule-width
Définit l'épaisseur des filets de séparation de lignes dans un contexte de conteneur grille ou de conteneur flex-box.
⚠
rule
Propriété résumé qui affecte les mêmes valeurs aux filets séparant les lignes et à ceux séparant les colonnes.
Rule-break
Propriété qui définit comment se comportent les filets de séparation des lignes et des colonnes à leur intersection.
⚠
rule-color
Définit la couleur des filets de séparation des lignes et des colonnes, dans le contexte d'un conteneur grille, d'un conteneur flex, ou tout autre conteneur faisant apparaître des blocs en lignes ou en colonnes.
⚠
rule-inset
Détermine si les filets séparant les lignes et ceux séparant les colonnes se touchent aux intersections (dans le contexte d'un conteneur grille ou de tout autre conteneur présentation des blocs en lignes et en colonnes).
⚠
rule-overlap
Définit lesquels des filets séparant les lignes ou des filets séparant les colonnes passent au dessus des autres.
⚠
rule-style
Définit le style de trait pour les filets entre les lignes et les colonnes, dans le contexte d'un conteneur grille, d'un conteneur flex, ou de tout autre conteneur faisant apparaître des blocs en lignes et en colonnes.
⚠
rule-visibility-items
Définit si les traits de séparation doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.a
⚠
rule-width
Définit l'épaisseur des filets qui séparent les lignes et les colonnes, dans le contexte d'un conteneur faisant apparaître des blocs en lignes et en colonnes (grille, flex-box, etc.).