Rule - Propriété CSS

rule

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

Description rapide
Propriété résumé qui affecte les mêmes valeurs aux filets séparant les lignes et à ceux séparant les colonnes.
Statut
Problèmes de compatibilité ⚠
S'applique à
Conteneurs grille, conteneurs flex-box
Pourcentages
Reportez-vous aux propriétés individuelles.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non.
Type d'animation
Voir les propriétés individuelles.
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)

Description de la propriété rule.

⚠
Cette propriété est expérimentale. Pour l'instant, peu de navigateurs reconnaissent cette propriété (2025).

rule est une propriété résumée qui permet de définir en une seule règle toutes les propriétés concernant les filets de séparation, à savoir :

Définit la couleur des filets de séparation des lignes dans le contexte d'un conteneur grille ou d'un flex-box.
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.
Définit l'épaisseur des filets de séparation de lignes dans un contexte de conteneur grille ou de conteneur flex-box.
Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
Choisit le type de trait pour les filets séparant les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.
Définit l'épaisseur du filet de séparation entre les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.

Ainsi que des propriétés résumées suivantes :

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.
Propriété résumé définissant tous les paramètres du trait de séparation entre les colonnes.
Définit la couleur des filets de séparation des lignes et des colonnes, dans le contexte d'un conteneur grille ou d'un conteneur flex.
Définit le style de trait pour les filets entre les lignes et les colonnes, dans le contexte d'un conteneur grille ou d'un conteneur flex.
Définit l'épaisseur des filets qui séparent les lignes et les colonnes, dans le contexte d'un conteneur flex ou grille.

Il y a aussi des propriétés qui ne sont pas résumées par rule, mais qui sont cependant relatives aux filets de séparation :

Définit comment les filets de séparation des lignes se comportent au niveau des intersection avec les traits de séparation des colonnes.
Spécifie de combien les filets séparant les lignes débordent aux intersections.
Définit comment se comportent les filets de séparation des colonnes aux intersections avec les filets de séparation des lignes.
Détermine si les filets séparant les colonnes s'arrêtent aux intersections. Contexte : conteneur multi-colonnes, grille ou flex.
Propriété résumée qui définit comment se comportent les filets de séparation des lignes et des colonnes à leur intersection.
Propriété résumée qui définit à la fois le débordement des filets séparant les lignes et de ceux séparant les colonnes.
Définit lesquels des filets séparant les lignes ou des filets séparant les colonnes passent au dessus des autres.

Les filets de séparation s'affichent entre les lignes ou les colonnes, il n'y en a pas avant la première ligne/colonne, ni après la dernière. Pour être visible, l'espace entre les lignes et/ou entre les colonnes doit être différent de 0. Cet espace est géré par les propriétés row-gap, column-gap et gap. Le filets de séparation n'augmentent pas la taille de l'espace, ils peuvent donc empiéter sur le contenu des colonnes et/ou des lignes, mais en arrière-plan.

rule affecte les mêmes valeurs aux filets entre les lignes et au filets entre les colonnes.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T

Valeurs pour rule.

⚠ Les exemples ne fonctionnent pas sur Firefox   (2025).

  • rule: 3px solid blue, 5px double red; rule: repeat(2, 3px solid blue, 5px double red)

    Un ou plusieurs groupe de valeurs séparés par une virgule. La fonction repeat() est également autorisée. Reportez vous à sa description pour connaître sa syntaxe exacte.

    Les mêmes valeurs sont affectées aux filets de ligne et aux filets de colonnes. On alterne les filets en bleu et ceux en rouge. L'épaisseur et le style de trait varie également. On pourrait alterner davantage de valeurs. Si le nombre de filets est supérieur au nombre de valeurs, la liste est reprise depuis le début.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    rule:3px solid blue, 5px double red;
  • rule-break: spanning-items;

    La propriété résumée rule-break n'est pas encore reconnue (2025), mais les propriétés détaillées sont bien reconnues par Chrome   et Edge  . Reportez-vous à la propriété rule-break pour plus de précisions sur la syntaxe.

    La propriété rule-break intervient lorsque la grille contient des cellules fusionnée, comme c'est le cas dans les grilles ci-dessous. Les valeurs possibles sont : spanning-item, none and intersection.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    row-rule-break:spanning-item;
    column-rule-break:spanning-item;
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    row-rule-break:none;
    column-rule-break:none;
  • rule-outset: 10px; ⚠

    La propriété résumée rule-outset n'est pas encore reconnue (2025), mais les propriétés détaillées row-rule-outset et column-rule-outset sont bien reconnues par Chrome   et Edge  .

    La propriété rule-outset définit de combien les filets dépassent les intersections. la valeur peut être une dimension ou un pourcentage. Reportez-vous à la propriété rule-outset pour plus de précisions sur la syntaxe.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    row-rule-outset:10px;
    column-rule-outset:10px;
  • rule-paint-order: row-over-column; ⚠

    Définit ce qui se passe à l'intersection des filets de ligne et des filets de colonne. Voir la propriété rule-paint-order pour plus d'informations.

    ⚠ Cette propriété est encore très mal prise en charge par les navigateurs.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    rule-paint-order:row-over-column;
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    rule-paint-order:column-over-row;
  • rule: initial; rule: inherit; rule: revert; rule: revertLayer; rule: unset;

    Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Prise en charge de rule par les navigateurs.

Reportez vous aux pages sur les différentes propriétés pour voir leur compatibilité. Globalement, à l'heure actuelle (2025), seuls Chrome   et Edge   traitement à peu près bien ces propriétés.

Historique de la propriété rule.

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

    Concernant rule. Introduction de la notion de filet de séparation entre les lignes et les colonnes des grilles et des flex-box. Et introduction des propriétés pour les définir, dont rule.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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

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-outset
Détermine si les filets séparant les colonnes s'arrêtent aux intersections. Contexte : conteneur multi-colonnes, grille ou flex.
⚠
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-outset
Spécifie de combien les filets séparant les lignes débordent aux intersections.
⚠
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-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é résumée 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 ou d'un conteneur flex.
⚠
rule-outset
Propriété résumée qui définit à la fois le débordement des filets séparant les lignes et de ceux séparant les colonnes.
⚠
rule-paint-order
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 ou d'un conteneur flex.
⚠
rule-width
Définit l'épaisseur des filets qui séparent les lignes et les colonnes, dans le contexte d'un conteneur flex ou grille.