Rule-color - Propriété CSS

rule-color

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

Description rapide
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.
Statut
Problèmes de compatibilité ⚠
S'applique à
Conteneurs grille, conteneurs flex-box
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é rule-color passe progressivement d'une valeur à une autre.
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-color.

⚠
Cette propriété est expérimentale. Pour l'instant Chrome   et Edge   sont les seuls navigateurs qui la reconnaissent.

Cette propriété s'applique aux conteneurs grille ou au conteneurs flex. Elle détermine la couleur des filets de séparation des lignes et des colonnes. Les deux types de filets recevant la même couleur. Pour que les filets soient visibles, n'oubliez pas de définir aussi rule-style.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
Effet de rule-color sur un conteneur grille.
.
A
B
C
D
E
F
G
H
I
J
K
L
Effet de rule-color sur un conteneur flex.
.

rule-color est une propriété qui permet de définir les deux suivantes avec la même 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 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.


Reportez-vous à la page sur rule pour une synthèse des propriétés relatives aux filets de séparation.

Valeurs pour rule-color.

  • rule-color: blue;

    Les filets séparant les lignes et ceux séparant les colonnes sont de la couleur indiquée. Cette dernière peut être spécifiée avec n'importe laquelle des syntaxes reconnues par CSS (voir les Les couleurs).

    currentcolor donne la couleur du texte du conteneur. La couleur transparent est autorisée mais n'a aucun effet.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    rule-color:blue;
  • rule-color: blue red;

    Plusieurs valeurs séparées par un espace peuvent être indiquées. elles s'appliquent dans l'ordre à chacun des filets. Si le nombre de filets est supérieur au nombre de valeurs, on recommence au début de la liste.

    La fonction repeat() est acceptée si le nombre de filets est important. Reportez vous à la description de la fonction pour plus de précisions sur sa syntaxe.

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

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

Exemple d'animation de rule-color.

L'animation de rule-color peut se faire de façon très souple, les couleurs étant assimilées à des nombres.

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é rule-color.

Le simulateur présente un conteneur grille duquel vous pouvez changer la valeur de rule-color.

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

Compatibilité des navigateurs avec rule-color.

La propriété rule-color est enore peu reconnue. Pour l'instant (2025) uniquement par Chrome   et Edge  .

Histoire de la propriété rule-color.

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