Rule-width - Propriété CSS

rule-width

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

Description rapide
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.).
Statut
Problèmes de compatibilité ⚠
Valeurs prédéfinies
medium | thin | thick
Pourcentages
Ne s'appliquent pas.
Valeur initiale
medium
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété rule-width 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)

Schéma de la syntaxe de rule-width.

Rule-width - Syntax DiagramSyntax diagram of the rule-width CSS property. Defines the thickness of the column separator lines and the line separation lines. thin thin medium medium thick thick length length , ,rule-width:;rule-width:;
Schéma syntaxique de la propriété rule-width.
Télécharger le schéma en SVG.

Description des termes utilisés sur le schéma :

  • length est une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.
  • Plusieurs valeurs peuvent être énumérées en les séparant par une virgule.

Description de la propriété rule-width.

⚠
Pour l'instant vous ne pouvez utiliser rule-width que avec Chrome   ou Edge   (2026).

rule-width définit l'épaisseur des filets horizontaux et des filets verticaux, dans un conteneur grille, un conteneur flex ou tout autre conteneur qui fait apparaître des blocs en ligne et/ou en colonne. Ces filets séparent lignes et colonnes. Sur les deux exemples ci-dessous un trait d'épaisseur 5px a été choisi.

⚠ Si cela ne semble pas marcher, essayez avec un autre navigateur, tel que Chrome   ou Edge  .

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
Effet de rule-width sur un conteneur grille.
.
A
B
C
D
E
F
G
H
I
J
K
L
Effet de rule-width sur un conteneur flex.
.

rule-width est une propriété qui permet de définir à la fois les filets des lignes et ceux des colonnes, avec les mêmes valeurs, soit les deux propriétés ci-dessous :

Définit l'épaisseur des filets de séparation de lignes dans un contexte de conteneur grille ou de conteneur flex-box.
Définit l'épaisseur du filet de séparation entre les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.

Il faut noter que l'épaisseur des filets ne s'ajoute pas à l'espace entre les lignes ou les colonnes. Ce qui veut dire aussi que les filets peuvent empiéter sur le contenu des lignes ou des colonnes. Cependant, étant derrière le contenu, ils n'empêcheront jamais la lecture.

Pensez aussi à définir rule-style sans ça les filets ne seront pas visibles, la valeur par défaut de rule-style étant none.


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

Valeurs pour rule-width.

  • rule-width: 5px;

    Les filets séparant les lignes et ceux séparant les colonnes sont tracés avec l'épaisseur indiquée. Celle-ci peut être également une des valeurs prédéfinie !

    • medium : un filet de 3 pixels environ. Valeur par défaut.
    • thin : un filet fin (environ 1 pixel).
    • thick : un filet épais (environ 5 pixels).
    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
    rule-width:6px;
  • rule-width: 6px, 2px; rule-width: 6px, repeat(10, thin);

    Lorsque plusieurs valeurs sont énumérées, séparées par une virgule, chacune d'elle s'applique à un filet horizontal et à un filet vertical. Si le nombre de filets est supérieur au nombre de valeurs, la liste est recommencée depuis le début.

    La fonction repeat() est acceptée dans la 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
    rule-width:6px, repeat(10,2px);
  • rule-width: initial; (medium) rule-width: inherit; rule-width: revert; rule-width: revert-layer; rule-width: revert-rule; rule-width: unset;

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

Exemple d'animation de rule-width.

L'animation de rule-width est continue, même si vous utilisez les valeurs prédéfinies car chacune d'elle correspond à une valeur numérique.

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

Exemple interactif avec la propriété rule-width.

Le simulateur présente un conteneur grille et un conteneur flex-box desquels vous pouvez changer la valeur de rule-width.

rule-width :
Grille
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
Flex-box
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 rule-width.

La propriété rule-width est encore peu reconnue. Pour l'instant (2026) seuls par Chrome   et Edge   traitent cette propriété.

Colonne 1
Support de la propriété résumée rule-width, qui définit l'épaisseur des filets entre les lignes et des filets entre les colonnes dans une grille, un flex-box, etc.
Colonne 2
Support de la propriété column-rule-width, définissant l'épaisseur du trait de séparation des colonnes, dans le cas d'une mise en page en colonnes.
Colonne 3
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.
1
Propriété
rule-width
2
Propriété
column-rule-width
3
Propriété
row-rule-width
Estimation de la prise en charge globale.
57%
96%
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
Caniuse
Caniuse

Histoire de la propriété rule-width.

  • 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 rule-width Introduction de la propriété rule-width pour les conteneurs flex et les conteneurs grille.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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

Le module de spécification module CSS - Décorations des espaces. qui décrit rule-width regroupe également tout ce qui concerne les filets de séparation de lignes ou de colonnes. Cela s'applique aux conteneurs flex, aux conteneurs grille, aux conteneurs multi-colonnes, et à tous conteneurs pouvant faire apparaître des blocs en lignes ou en colonnes. Les propriétés suivantes sont également décrites dans ce même 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.).