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é ⚠
S'applique à
Conteneurs grille, conteneurs flex-box
Utilisable sur
HTML
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.
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. none none hidden hidden solid solid double double dashed dashed dotted dotted groove groove ridge ridge inset inset outset outsetrow-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.

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

⚠
Cette propriété est expérimentale (2025). Pour l'instant seuls Chrome   et Edge   la traitent correctement.

row-rule-style définit le type de filet pour séparer les lignes, dans un conteneur flex ou un conteneur grille. Ces types de filet sont les mêmes que ceux des bordures.

Pour que le filet soit visible la propriété row-gap qui définit les dimensions de l'espace entre les lignes doit être à une valeur positive. Néanmoins l'épaisseur du filet peut être plus grande que celle du gap.

Cette propriété a un équivalent pour les colonnes : column-row-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.

  • 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.
    outset
    Une ligne avec effet un effet de relief en 3D.

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

  • row-rule-style: dotted dashed; row-rule-style: repeat(3, dotted dashed);

    Plusieurs valeurs peuvent être répétées en les séparant par un espace. 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.

  • row-rule-style: initial; (none) row-rule-style: inherit; row-rule-style: revert; row-rule-style: revertLayer; row-rule-style: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, 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

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.

row-rule-style :
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 (2025) la prise en charge de row-rule-style est assez pauvre : seuls Chrome   et Edge   la reconnaissent.

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

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