Row-rule - Propriété CSS

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 ou un conteneur flex, 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.

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 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, bien que cette dernière doivent être différente de 0 pour que le filet soit visible.

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
  row-rule:3px solid blue;
• row-rule: 3px solid blue, 5px double red; row-rule: repeat(5, );

  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 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
  row-rule:3px solid blue, 5px double red;
• row-rule: initial; row-rule: inherit; row-rule: revert; row-rule: revertLayer; row-rule: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, 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.

Prise en charge de row-rule par les navigateurs.

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

Historique de la propriété row-rule.

• Module CSS - Décoration des espaces - Niveau 1.

  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.

Propriétés :