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é (2026).

rule s'occupe des filets de séparation entre lignes et colonnes, dans un conteneur grille, flex-box, etc. 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 :

Lignes
Colonnes
Épaisseur
Style
Couleur
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, d'un conteneur flex, ou tout autre conteneur faisant apparaître des blocs en lignes ou en colonnes.
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.
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.).

Les filets de séparation s'affichent entre les lignes ou les colonnes, il n'y en a pas avant la première ligne ou colonne, ni après la dernière. L'espace dans lequel ces filets prennent place s'appelle le gap. Il 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 cet 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 (cet exemple ne fonctionne pas sur tous les navigateurs).

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

Valeurs pour rule.

⚠ Les exemples ne fonctionnent pas sur Firefox   (2026), ni sur d'autres navigateurs.

  • rule: 3px solid blue;

    Si un seul jeu de valeurs est indiqué, tous les filets seront identiques aussi bien en lignes qu'en colonnes. Comme toutes les propriété résumées, rule initialise les valeurs absentes à leur valeur initiale : medium pour l'épaisseur, currentColor pour la couleur et none pour le style de trait. Cette dernière valeur est donc nécessaire pour que les filets apparaissent.

    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:3px solid blue;
  • 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. Sur l'exemple ci-dessous, 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
    R
    S
    T
    U
    V
    W
    X
    Y
    Z
    rule:3px solid blue, 5px double red;
  • rule: initial; rule: inherit; rule: revert; rule: revert-layer; rule: revert-rule; rule: unset;

    Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, revert-rule, 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 (2026), seuls Chrome   et Edge   traitement à peu près bien ces propriétés.

Colonne 1
Prise en charge de la propriété résumée rule qui définit les paramètres des filets de séparation des colonnes et des filets de séparation des lignes, dans un conteneur flex, grille, etc.
1
Propriété
rule
Estimation de la prise en charge globale.
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

Historique de la propriété rule.

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

La propriété rule est décrite dans le module CSS - Décorations des espaces.. mais il y a beaucoup d'autres propriétés décrites dans ce module. En voici le liste.

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