Rule-style - CSS Property

rule-style

Summary of characteristics of the rule-style property

Quick description
Sets the style for the line between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows and columns.
Status
Compatibility issues ⚠
Predefined values
none | solid | double | dotted | dashed | ridge | groove | inset | outset
Percentages
Not applicable.
Initial value
none
Inherited by default
No.
Animation type
Discrète: during an animation, the rule-style property passes from one value to another without transition.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Gap Decorations Module.
References (W3C)
Document status: WD (Working Draft)

Syntax diagram of 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:;
Syntax diagram of the rule-style property.
Download the diagram in SVG.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

  • Multiple values can be listed by separating the values with a comma.

Description of the rule-style property.

⚠
This feature is new. For now, you can only use it with Chrome   or Edge   (2026).

{rule-style draws horizontal and vertical lines in a grid container or any other container that displays blocks in rows or columns. These lines separate the rows and columns. rule-style also lets you set the style used for the lines. In the examples below, a double line has been chosen.

⚠ If that doesn't seem to work, try using another browser, like Chrome   or 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
Effect of rule-style on a grid container.
.
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
Effect of rule-style on a flex-box container.
.

rule-style is a property that lets you apply the same line style to the separators between rows and columns:

Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container.


Refer to the page on rule, which is a summary of the properties related to separation lines.

Values for rule-style.

  • rule-style: none;

    The nets separating the rows and those separating the columns aren't drawn.

    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;

    Several line styles are available. You can find the same styles as for the borders.

    solid
    A simple line.
    double
    A double line.(1)
    dotted
    A series of dots.
    dashed
    A series of dashes.
    groove
    A line with a 3D recessed effect: groove.(1)
    ridge
    A line with a 3D embossed effect.(1)
    inset
    A line with a 3D dug effect.
    outset
    A line with a 3D embossed effect.

    (1) For double and 3D effects to be visible, you need to select a thickness of at least 4 pixels. The 3D effects correspond to groove, ridge, inset, and 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;

    Several values separated by a comma can be specified. They apply in order to each of the lines. If the number of lines is greater than the number of values, you start again at the beginning of the list.

    The repeat() function is accepted. It is especially useful if the number of lines is large. Check the function description for more details on its syntax.

    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;

    Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the rule-style property.

The animation of rule-style can be done, but in a discontinuous way (a sudden jump from one value to another), which makes sense since the property only accepts discontinuous values.

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

Simulator.

The simulator shows a grid container and a flex container. You can change the value of rule-style for both of these containers.

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

Browsers compatibility with rule-style.

The rule-style property is still not widely recognized. For now (2026), only by Chrome  , Edge  , and a few browsers.

Column 1
Support for the rule-style property, which sets the same line styles for vertical rules (column separation) and horizontal rules (row separation) in a grid, flex-box, etc.
Column 2
Support for the property column-rule-style in the case of a multi-column layout.
Column 3
Support for the row-rule-style property that sets the line style for row separators in a grid, flex-box, etc.
1
rule-style
property
2
column-rule-style
property
3
row-rule-style
property
Estimated overall support.
57%
96%
57%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

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

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

Historic of the rule-style property.

  • CSS Gap Decorations Module Level 1.

    This module covers the rules that define gutters between columns in a multi-column container (grid, flex-box...). It extends these possibilities to gutters between elements arranged in multiple rows, allowing these features to be used on other types of containers. Several properties define how these gutters should be drawn.

    Regarding rule-style Introduction of the rule-style property, as well as other properties related to borders.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about gap decorations.

A new specification has been created to define all the properties related to line and column dividers: CSS Gap Decorations Module.. These properties are the following:

Properties:

⚠
column-rule-break
Defines how the column separator lines behave at intersections with the row separator lines.
⚠
column-rule-inset
Sets the spacing at the ends of the column separation lines (in a grid container or any other container that displays blocks in columns).
⚠
column-rule-visibility-items
Sets whether the column dividers should be shown all the time, only when there's an item next to them, or when the divider is between two items.
⚠
row-rule
Shorthand property that sets the thickness, style, and color of row separator lines, in the context of a flex container, or a grid container.
⚠
row-rule-break
Defines how the line separator traits behave at the intersections with the column separator traits.
⚠
row-rule-color
Defines the color of the dividing lines within a grid or flex-box container.
⚠
row-rule-inset
Sets the spacing at the ends of the line divider lines (in a grid container or any other container that displays blocks in columns).
⚠
row-rule-style
Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
⚠
row-rule-visibility-items
Sets whether the line separators should be shown all the time, only when there's an item next to them, or when the line is between two items.
⚠
row-rule-width
Defines the thickness of the line separation traits in a grid container or flex-box container context.
⚠
rule
Shorthand property that assigns the same values to the lines separating the rows and those separating the columns.
⚠
rule-break
Property that defines how the row and column gridlines behave at their intersection.
⚠
rule-color
Sets the color of the dividing lines between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows or columns.
⚠
rule-inset
Check if the lines separating the rows and the ones separating the columns touch at the intersections (like in a grid container or any other container that lays out blocks in rows and columns).
⚠
rule-overlap
Define which of the lines separating the rows or the lines separating the columns go above the others.
Rule-style
Sets the style for the line between rows and columns, in the context of a grid container, a flex container, or any other container that displays blocks in rows and columns.
⚠
rule-visibility-items
Sets whether the divider lines should be shown all the time, only when there's an item next to them, or when the line is between two items.
⚠
rule-width
Sets the thickness of the lines that separate rows and columns, in the context of a container displaying blocks in rows and columns (grid, flex-box, etc.).