Rule-style - Propriété CSS

rule-style

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

Description rapide
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.
Statut
Problèmes de compatibilité ⚠
Valeurs prédéfinies
none | solid | double | dotted | dashed | ridge | groove | inset | outset
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété rule-style passe d'une valeur à l'autre sans transition.
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-style.

Rule-style - Syntax DiagramSyntax diagram of the rule-style CSS property. Sets the style of the column separation lines and the row separation lines. none none hidden hidden solid solid double double dotted dotted dashed dashed groove groove ridge ridge inset inset outset outset , ,rule-style:;rule-style:;
Schéma syntaxique de la propriété rule-style.
Télécharger le schéma en SVG.

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

  • Des valeurs multiples peuvent être énumérées en les séparant par une virgule.

Description de la propriété rule-style.

⚠
Cette propriété est récente. Pour l'instant vous ne pouvez l'utiliser que avec Chrome   ou Edge   (2026).

rule-style dessine des filets horizontaux et verticaux dans un conteneur grille ou tout autre conteneur conteneur faisant apparaître des blocs en lignes ou en colonnes. Ces filets séparent lignes et colonnes. rule-style permet en plus de définir le style de trait utilisé pour les filets. Sur les exemples ci-dessous un trait double 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-style sur un conteneur 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
Effet de rule-style sur un conteneur flex.
.

rule-style est une propriété qui permet d'appliquer le même style de ligne aux filets de séparation des lignes et des colonnes :

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.
Choisit le type de trait pour les filets séparant les colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur flex ou d'un conteneur grille.


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

Valeurs pour rule-style.

  • rule-style: none;

    Les filets séparant les lignes et ceux séparant les colonnes ne sont pas tracés.

    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-style:none;
  • rule-style: solid;

    Plusieurs styles de traits sont disponibles. On retrouve les mêmes styles que pour les bordures.

    solid
    Un trait simple.
    double
    Un double trait.(1)
    dotted
    Une série de points.
    dashed
    Une série de tirets.
    groove
    Une ligne avec effet 3D en creux : rainure.(1)
    ridge
    Une ligne avec effet 3D en relief : bourrelet.(1)
    inset
    Une ligne avec un effet d'incrustation en 3D.
    outset
    Une ligne avec effet de relief en 3D.

    (1) Pour que double et les effets 3d soient visibles, il faut sélectionner une épaisseur de au moins 4 pixels. Les effets 3D correspondent à groove, ridge, inset et outset.

    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-style:double;
  • rule-style: solid; dotted; rule-style: repeat(2,solid), double;

    Plusieurs valeurs séparées par une virgule 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. Elle est utile surtout 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
    U
    V
    W
    X
    Y
    Z
    rule-style:solid, dotted;
  • rule-style: initial; (none) rule-style: inherit; rule-style: revert; rule-style: revert-layer; rule-style: revert-rule; rule-style: unset;

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

Exemple d'animation de rule-style.

L'animation de rule-style peut se faire, mais de façon discontinue (passage brutal d'une valeur à l'autre), ce qui est logique puisque la propriété n'accepte que des valeurs discontinues.

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

Le simulateur présente un conteneur grille et un conteneur flex. Vous pouvez changer la valeur de rule-style de ces deux conteneurs.

rule-style :
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-style.

La propriété rule-style est encore peu reconnue. Pour l'instant (2026) uniquement par Chrome  , Edge   et quelques navigateurs.

Colonne 1
Prise en charge de la propriété rule-style qui définit à l'identique les styles de traits pour les filets verticaux (séparation des colonnes) et pour les filets horizontaux (séparation des lignes), dans un conteneur grille, flex-box, etc.
Colonne 2
Support de la propriété column-rule-style dans le cas d'une mise en page sur plusieurs colonnes.
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.
1
Propriété
rule-style
2
Propriété
column-rule-style
3
Propriété
row-rule-style
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-style.

  • 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-style Introduction de la propriété rule-style, ainsi que des autres propriétés relatives aux filets.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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

Une nouvelle spécification a été créée pour définir toutes les propriétés relatives aux filets de séparation de lignes et de colonnes : module CSS - Décorations des espaces.. Ces propriétés sont le suivantes :

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