`Row-rule` - Propriété CSS

row-rule

row-rule-width

row-rule-style

row-rule-color

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

Description rapide

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.

Statut

Problèmes de compatibilité ⚠

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Non.

Type d'animation

Voir les propriétés individuelles.

Ordre canonique

Per grammar : sérialisation dans l'ordre de la syntaxe.
La saisie des valeurs peut se faire dans un ordre quelconque.

Module W3C

Module CSS - Décorations des espaces.

Références (W3C)

CSS Gap Decorations Module Level 1.

Statut du document: WD (document de travail)

Schéma syntaxique de `row-rule`.

Schéma syntaxique de la propriété row-rule.
Télécharger le schéma en SVG.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

row-rule est une propriété résumée qui regroupe row-rule-width, row-rule-style et row-rule-color. Sur les schéma ces termes correspondent aux syntaxes des propriétés correspondantes. Reportez-vous à leurs pages respectives.
La syntaxe peut être répétée plusieurs fois avec une virgule comme séparateur.

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

⚠

Cette propriété est expérimentale. Pour l'instant Chrome

et Edge

sont les seuls navigateurs qui la reconnaissent.

Dans un conteneur grille, un conteneur flex ou tout autre conteneur susceptible de faire apparaître des lignes de blocs, row-rule trace des filets de séparation entre les lignes. Il est possible d'ajuster la couleur, le style et l'épaisseur de ces filets.

Sur un conteneur grille.

Sur un conteneur flex.

row-rule est une propriété résumée qui permet de définir en une seule règle les propriétés suivantes :

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.

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-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 n'insère pas de filet avant la première ligne, ni après la dernière. Les filets sont vraiment des séparations de lignes et n'apparaissent que entre deux lignes.

L'épaisseur des filets ne s'ajoutent pas à celle définie par row-gap.

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

Valeurs pour `row-rule`.

row-rule: 3px solid blue;

C'est la syntaxe la plus simple pour row-rule : on définit les valeurs pour chacune des propriétés. Ces valeurs s'appliquent à tous les traits horizontaux de séparation.

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

row-rule:3px solid blue;
row-rule: 3px solid blue, 5px double red; row-rule: repeat(5, 5px solid blue), double;

Plusieurs groupes de valeurs séparés par des virgules. Chaque groupe de valeurs s'applique à un filet de séparation. S'il y a plus de filets que de valeurs, la liste est re-explorée depuis le début.

La fonction repeat() est acceptée et utile lorsque 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
U
V
W
X
Y
Z

row-rule:3px solid blue, 5px double red;
row-rule: initial; row-rule: inherit; row-rule: revert; row-rule: revert-layer; row-rule: revert-rule; row-rule: unset;
row-rule-width: initial; (medium) row-rule-width: inherit; row-rule-width: revert; row-rule-width: revert-layer; row-rule-width: revert-rule; row-rule-width: unset;
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;
row-rule-color: initial; (currentcolor) row-rule-color: inherit; row-rule-color: revert; row-rule-color: revert-layer; row-rule-color: revert-rule; row-rule-color: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, revert-rule, unset.

Animation de la propriété `row-rule`.

L'animation de row-rule est possible. Elle est progressive sur les valeurs correspondant à row-rule-width et row-rule-color et discrete (brutale) sur row-rule-style. Voyez d'autres exemples d'animation sur les propriété individuelles.

Simulateur avec la propriété `row-rule`.

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

row-rule :

Prise en charge de `row-rule` par les navigateurs.

La propriété row-rule est encore trop peu reconnue. Pour l'instant (2026) uniquement par Chrome et Edge .

Colonne 1

Prise en charge de la propriété résumée row-rule qui détermine les paramètres des filets de séparation des lignes dans un conteneur grille, flex-box, etc.

Colonne 2

Prise en charge de la propriété row-rule-width qui définit l'épaisseur des filets de séparation des lignes dans un conteneur grille, flex-box, etc.

Colonne 3

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.

Colonne 4

Prise en charge de la propriété row-rule-color qui définit la couleur des filets de séparation de lignes, dans un conteneur grille, flex-box, etc.

Propriété
row-rule

Propriété
row-rule-width

Propriété
row-rule-style

Propriété
row-rule-color

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

Historique de la propriété `row-rule`.

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 Extension de la propriété column-rule pour l'étendre au paramétrage des séparation de lignes dans un conteneur grille ou un conteneur flex-box.

17 Avril 2025
Document de travail.

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

Les filets de décoration sont décrits dans le nouveau module CSS - Décorations des espaces.. Voici les autres propriétés qui figurent dans ce module:

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