Row-rule-style - Propriété CSS

row-rule-style

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

Description rapide
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.
Statut
Problèmes de compatibilité ⚠
Valeurs prédéfinies
none | solid | double | dashed | dotted | groove | ridge | inset | outset
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété row-rule-style 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 row-rule-style.

row-rule-style - Syntax DiagramSyntax diagram of the row-rule-style CSS property. Specifies the line style for row dividers. none none hidden hidden solid solid double double dashed dashed dotted dotted groove groove ridge ridge inset inset outset outset , ,row-rule-style:;row-rule-style:;
Schéma syntaxique de la propriété row-rule-style.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.

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

  • La syntaxe peut être répétée en séparant les valeurs par une virgule.

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

⚠
Cette propriété est expérimentale (2026). Pour l'instant seuls Chrome  , Edge   et quelques autres navigateurs la traitent correctement.

row-rule-style définit le type de filet pour séparer les lignes, dans un conteneur flex, un conteneur grille, ou tout autre conteneur qui fait apparaître des blocs en ligne. Ces types de filet sont les mêmes que ceux des bordures.

Cette propriété a un équivalent pour les colonnes : column-rule-style, qui fonctionne de la même façon. Reportez-vous également à la propriété résumée row-rule et, pour une synthèse sur les filets, à rule.

Valeurs pour row-rule-style.

  • row-rule-style: none;

    Cette valeur indique qu'il n'y a pas de filet entre les lignes. C'est la valeur initiale.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    X
    Z
    row-rule-style:none;
  • row-rule-style: dotted;

    De nombreuses valeurs prédéfinies sont acceptée par la propriété. Ce sont les même que pour les bordures.

    solid
    Un trait simple.
    double
    Un trait double.(1)
    dotted
    Une succession de points.
    dashed
    Une succession de tirets.
    groove
    Une ligne avec effet 3D : rainure.(1)
    ridge
    Une ligne avec effet 3D : bourrelet.(1)
    inset
    Une ligne avec un effet d'incrustation en 3D.(2)
    outset
    Une ligne avec effet un effet de relief en 3D.(2)

    (1) L'effet double et les effets 3D ne sont visibles que si l'épaisseur de la ligne est de au moins 3 pixels.

    (2) Les valeurs inset et outset sont mal adaptées à row-rule-style, car elles supposent des lignes qui se croisent perpendiculairement. Utilisées avec row-rule-style elles provoquent seulement un éclaircissement ou un assombrissement de la couleur du trait ou sont équivalentes à groove et ridge.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    X
    Z
    row-rule-style:inset;
  • row-rule-style: dotted, dashed; row-rule-style: repeat(3, dotted), solid;

    Plusieurs valeurs peuvent être répétées en les séparant par une virgule. Chaque valeur est appliquée à un filet dans l'ordre. S'il y a plus de filets que de valeurs, la liste est explorée à nouveau en partant du début.

    La fonction repeat() est également acceptée. Reportez-vous à la description de cette fonction pour de plus amples renseignements.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    U
    V
    W
    X
    X
    Z
    row-rule-style:repeat(2,dotted), double;
  • row-rule-style: initial; (none) row-rule-style: inherit; row-rule-style: revert; row-rule-style: revert-layer; row-rule-style: revert-rule; row-rule-style: unset;

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

Exemple d'animation de row-rule-style.

L'animation de row-rule-style est forcément discrete (discontinue) puisque la propriété n'accepte que des valeurs prédéfinies. Ci-dessous une animation de row-rule-style sur un conteneur 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

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

Ce simulateur est construit sur un conteneur flex-box. Avec ce simulateur, vous pouvez ajuster la valeur de row-rule-style et jouer également sur les dimensions du conteneur flex.

row-rule-style :
Flex-box
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

Compatibilité des navigateurs avec row-rule-style.

Pour l'instant (2026) la prise en charge de row-rule-style est assez pauvre : seuls Chrome  , Edge   et quelques autres navigateurs la reconnaissent.

Colonne 1
Prise en charge de la propriété row-rule-style qui définit le style de trait pour les filets de séparation des lignes dans un conteneur grille, flex-box, etc.
1
Propriété
row-rule-style
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

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

  • 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 row-rule-style Extension de la propriété column-rule-style pour l'appliquer aux lignes de séparation des lignes.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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

Le module CSS - Décorations des espaces. nouvellement créé, défini toutes les propriétés relatives aux filets de décoration, dans le contexte d'un conteneur grille, flex-box ou de tout autre conteneur qui fait apparaître des blocs en lignes ou en colonnes. Ces propriétés sont les suivantes :

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