Row-rule-width - Propriété CSS

row-rule-width

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

Description rapide
Définit l'épaisseur des filets de séparation de lignes dans un contexte de conteneur grille ou de conteneur flex-box.
Statut
Problèmes de compatibilité ⚠
S'applique à
Conteneurs grille, conteneurs flex-box
Utilisable sur
HTML
Valeurs prédéfinies
medium | thin | thick
Pourcentages
Ne s'appliquent pas.
Valeur initiale
medium
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété row-rule-width passe progressivement d'une valeur à une autre.
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 row-rule-width.

row-rule-width - Syntax DiagramSyntax diagram of the row-rule-width CSS property. thick thick thin thin medium medium width widthrow-rule-width:;row-rule-width:;
Schéma syntaxique de la propriété row-rule-width.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

  • width est une valeur numérique positive ou nulle suivi d'une unités de dimension.
  • On peut répéter la valeur en séparant par un espace.

Description de la propriété row-rule-width.

⚠
Cette propriété est expérimentale. Pour l'instant de grands navigateurs ne la reconnaissent toujours pas (2025).

row-rule-width définit l'épaisseur des filets entre les lignes, dans une grille ou un flex-box. Cela peut être une valeur prédéfinie ou une valeur numérique. Il est possible de donner plusieurs valeurs (séparées par des espaces).

Pour que les filets soient visibles, la propriété row-gap doit avoir une valeur différente de zéro. Cependant l'épaisseur du filet ne s'ajoute pas : ajouter un filet n'espace pas davantage les lignes, toujours définie par row-gap.

Cette propriété est exactement la symétrique de column-rule-width. Voir également la propriété résumée row-rule. Pour une synthèse sur les filets, voyez rule.

Valeurs pour row-rule-width.

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

  • row-rule-width: 3px;

    Un nombre positif ou nulle, suivie d'une unité de dimension (voir les unités de dimension). Les valeurs prédéfinies suivantes peuvent également être utilisées (les valeurs peuvent différer légèrement d'un navigateur à l'autre) :

    • thin : environ 1 pixel.
    • medium : environ 4 pixels (valeur initiale).
    • thick : environ 5 pixels.

    Le gap entre les lignes doit être supérieur à 0 et, pour un résultat esthétique, supérieur ou égal à l'épaisseur du filet.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    row-rule:medium;
  • row-rule-width: 3px 6px 15px; row-rule-width: repeat(3, thin medium);

    Une liste de valeurs séparées par un espace. Chacune des valeurs est attribuée à un filet horizontal. Si le nombre de filter est supérieur au nombre de valeurs, la liste est reprise depuis le début. La fonction repeat() est acceptée si le nombre de traits est importants.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    row-rule:3px 6px;
  • row-rule-width: initial; (medium) row-rule-width: inherit; row-rule-width: revert; row-rule-width: revertLayer; row-rule-width: unset;

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

Exemple d'animation de row-rule-width.

Nous vous proposons une animation sur un conteneur flex et une autre sur un conteneur grille.

A
B
C
D
E
F
G
H
Sur un flex-box.
A
B
C
D
E
F
G
H
I
J
K
L
Sur une grille.

Exemple interactif avec la propriété row-rule-width.

L'exemple ci-dessous est construit sur un flex-box. En pus de choisir la valeur pour row-rule-width, vous pouvez ajuster la taille du conteneur.

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

Compatibilité des navigateurs avec row-rule-width.

Pour l'instant (2025), il n'y a que Chrome   et Edge   qui traitent correctement cette propriété row-rule-width.

Histoire de la propriété row-rule-width.

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

    Concernant row-rule-width. Extension de la propriété column-rule-width pour définir l'épaisseur des lignes de séparation, dans le contexte d'un conteneur grille ou d'un conteneur flex-box.
    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.