Rule-width - CSS Property

rule-width

Summary of characteristics of the rule-width property

Quick description
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.).
Status
Compatibility issues ⚠
Predefined values
medium | thin | thick
Percentages
Not applicable.
Initial value
medium
Inherited by default
No.
Animation type
Computed value: during an animation, the rule-width property gradually changes from one value to another.
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-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:;
Syntax diagram of the rule-width property.
Download the diagram in SVG.

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

  • length is a numerical value, positive or zero, followed by one of CSS dimension units.
  • Several values can be listed by separating them with a comma.

Description of the rule-width property.

⚠
For now, you can only use rule-width with Chrome   or Edge   (2026).

rule-width sets the thickness of the horizontal and vertical lines in a grid container, a flex container, or any other container that displays blocks in rows and/or columns. These lines separate rows and columns. In the two examples below, a 5px thick line was 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-width on a grid container.
.
A
B
C
D
E
F
G
H
I
J
K
L
Effect of rule-width on a flex container.
.

rule-width is a property that allows you to set both the row and column borders at the same time, with the same values, i.e., the two properties below:

Defines the thickness of the line separation traits in a grid container or flex-box container context.
Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.

It should be noted that the thickness of the borders does not add to the space between the rows or columns. This also means that the borders can overlap the content of the rows or columns. However, since they are behind the content, they will never block reading.

Also remember to set rule-style, otherwise the borders won’t be visible, since the default value of rule-style is none.


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

Values for rule-width.

  • rule-width: 5px;

    The lilnes separating the rows and those separating the columns are drawn with the indicated thickness. This can also be one of the predefined values!

    • medium: a line about 3 pixels thick. Default value.
    • thin: a thin line (about 1 pixel).
    • thick: a thick line (about 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);

    When multiple values are listed, separated by a comma, each one applies to a horizontal border and a vertical border. If the number of borders is greater than the number of values, the list starts over from the beginning.

    The function repeat() is accepted in the 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-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;

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

Animation of the rule-width property.

The animation of rule-width is continuous, even if you use the preset values because each of them corresponds to a numerical value.

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-box container from which you can change the value of 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

Browsers compatibility with rule-width.

The rule-width property is still not widely recognized. For now (2026), only Chrome   and Edge   handle this property.

Column 1
Support for the shorthand property rule-width, which sets the thickness of the lines between rows and the lines between columns in a grid, a flexbox, etc.
Column 2
Support for the property column-rule-width, defining the thickness of the column separator line, in the case of a multi-column layout.
Column 3
Support for the row-rule-width property, which sets the thickness of the row separators in a grid, flex-box, etc.
1
rule-width
property
2
column-rule-width
property
3
row-rule-width
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-width 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-width Introduction of the rule-width property for flex containers and grid containers.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about gap decorations.

The specification CSS Gap Decorations Module. that describes rule-width also covers everything about row or column separators. This applies to flex containers, grid containers, multi-column containers, and any containers that can display blocks in rows or columns. The following properties are also described in that same module:

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