Row-rule-color - Propriété CSS

row-rule-color

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

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

row-rule-color - Syntax DiagramSyntax diagram of the row-rule-color CSS property. Sets the color of the line separation nets. currentcolor currentcolor transparent transparent color-name color-name #xxxxxx #xxxxxx color colorrow-rule-color:;row-rule-color:;
Schéma syntaxique de la propriété row-rule-color.
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 :

  • color-name est le nom standardisé d'une couleur. Voir Nuancier.
  • #xxxxxx est le code hexadécimal d'une couleur (3, 6 ou 8 digits).
  • color est une couleur définir par l'une des syntaxes reconnues par CSS.
  • Plusieurs couleurs peuvent être énumérées, séparées par un espace.

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

⚠
Cette propriété est encore expérimentale. Pour l'heure seuls quelques navigateurs la reconnaissent : Edge  , Chrome   par exemple.

row-rule-color définit la couleur du filet de séparation des lignes. Ces filets se trouvent entre les lignes dans un conteneur grille ou un conteneur flex-box. Ils prennent place dans l'espace entre les ligne (défini par row-gap) sans en augmenter la hauteur.

Reportez-vous également à la propriété équivalente pour les colonnes : column-rule-color, et à la propriété résumée row-rule. Vous pouvez également consulter une présentation générale sur rule.

Valeurs pour row-rule-color.

  • row-rule-color: #ff1852;

    Les filets entre les lignes seront de la couleur indiquée. Celle-ci peut être exprimée dans l'une quelconque des syntaxes reconnues par CSS : code hexadécimal, couleur nommée, fonction de couleur, etc.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    row-rule-color:lightBlue;
  • row-rule-color: #ff1852 white; row-rule-color: repeat(3, red blue green);

    Plusieurs valeurs peuvent être citées, en les séparant avec un espace. Chacun de ces valeurs s'applique à un des tirets de séparation de ligne. S'il y a plus de tirets que de ligne, la liste est reprise depuis le début.

    La fonction repeat() est acceptée ici. Reportez vous à sa description pour plus d'informations sur sa syntaxe.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    row-rule-color:red blue green;
  • row-rule-color: initial; (currentcolor) row-rule-color: inherit; row-rule-color: revert; row-rule-color: revertLayer; row-rule-color: unset;

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

Exemple d'animation de row-rule-color.

La propriété row-rule-color peut être animée et les animations sont fluides (comme toutes les propriétés qui attendent une couleur). Ci-dessous, nous avons réalisée l'animation de row-rule-color sur une grille.

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

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

Avec ce simulateur, construit sur un conteneur flex, vous pouvez choisir une couleur à appliquer à row-rule-color et également faire varier les dimensions du conteneur.

row-rule-color :
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

Compatibilité des navigateurs avec row-rule-color.

La propriété row-rule-color est encore mal reconnue : seuls les navigateur Chrome   et Edge   la reconnaissent.

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

  • 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 multicolonnes. 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-color. Extension de la propriété column-rule-color pour l'appliquer aux espaces entre les lignes, dans une grille ou un 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-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 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.