Rule - CSS Property

rule

Summary of characteristics of the rule property

Quick description
Shorthand property that assigns the same values to the lines separating the rows and those separating the columns.
Status
Compatibility issues ⚠
Applies to
Grid containers, flex-box containers
Percentages
See individual properties.
Initial value
See individual properties.
Inherited by default
No.
Animation type
See individual properties.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Gap Decorations Module.
References (W3C)
Document status: WD (Working Draft)

Description of the rule property.

⚠
This property is experimental. For now, few browsers recognize this property (2026).

rule handles the divider lines between rows and columns in a grid container, flex-box, etc. rule is a shorthand property that lets you set all the properties related to divider lines in a single rule, namely:

Rows
Columns
Width
Style
Color
Defines the color of the dividing lines within a grid or flex-box container.
Defines the line style to be used for separating lines, in the context of a grid container or a flex-box container.
Defines the thickness of the line separation traits in a grid container or flex-box container context.
Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container.
Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.

As well as the following summarized properties :

Shorthand property that sets the thickness, style, and color of row separator lines, in the context of a flex container, or a grid container.
Shorthand property that defines all parameters of the separator trait between columns.
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.
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.
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.).

The dividing lines appear between rows or columns; there aren't any before the first row or column, nor after the last one. The space where these lines sit is called the gap. It's managed by the row-gap, column-gap, and gap properties. The dividing lines don't increase the size of this space, so they can overlap the content of the columns and/or rows, but in the background.

rule assigns the same values to the lines between rows and the lines between columns (this example doesn't work on all browsers).

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

Values for rule.

⚠ The examples don't work on Firefox   (2026), or on other browsers either.

  • rule: 3px solid blue;

    If only one set of values is specified, all lines will be the same both in rows and columns. Like all the summarized properties, rule initializes missing values to their default: medium for thickness, currentColor for color, and none for line style. This last value is therefore necessary for the borders to appear.

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

    One or more groups of values separated by a comma. The repeat() function is also allowed. Refer to its description for the exact syntax.

    The same values are applied to row borders and column borders. In the example below, we alternate blue and red borders. The thickness and line style also vary. We could alternate more values. If the number of gaps exceeds the number of values, the list starts over from the beginning.

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

    For more information, refer to the presentation pages of these different values: initial, inherit, revert, revert-layer, revert-rule, unset.

Browsers compatibility with rule.

Refer to the pages on the different properties to see their compatibility. Overall, at the moment (2026), only Chrome   and Edge   handle these properties reasonably well.

Column 1
Support for the rule short-hand property that defines the settings for column separators and row separators in a flex container, grid, etc.
1
rule
property
Estimated overall support.
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

Historic of the rule 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 Introduction of the concept of separation lines between the rows and columns of grids and flexboxes. And introduction of the properties to define them, including rule.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about space decorations.

The property rule is described in the CSS Gap Decorations Module., but there are many other properties described in this module. Here's the list.

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