Column-rule-width - CSS Property

column-rule-width

Summary of characteristics of the column-rule-width property

Quick description
Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.
Status
Standard
Predefined values
medium | thick | thin
Percentages
Not applicable.
Initial value
medium
Inherited by default
No.
Animation type
Computed value: during an animation, the column-rule-width property gradually changes from one value to another.
Canonical order
Per grammar: serialization in the order of syntax.
W3C Module
CSS Multi-column Layout Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: CR (Candidate Recommendation)

Syntax diagram of column-rule-width.

column-rule-width - Syntax DiagramSyntax diagram of the column-rule-width CSS property. Defines the thickness of the column separator lines. thin thin medium medium thick thick length length , ,column-rule-width:;column-rule-width:;
Syntax diagram of the column-rule-width property.
The links in the diagram provide more details about the values.
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 numeric 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 column-rule-width property.

column-rule-width sets the thickness of the dividing line between columns. See also the shorthand property column-rule.

In the future, column-rule-width will also apply to grid containers, flex-box, etc. For now, only Chrome   and Edge   handle this possibility.

Note that the thickness of the divider line is taken from the gutter width: it is not added on. So having a divider line does not change the width of the columns or their spacing.
Also, if the divider line is thicker than the gutter, the line overlaps the content, but doesn’t cover it, since the content sits on top.

Initially intended to manage the thickness of the gutters in a multi-column container, the column-rule-width property was moved to the CSS Gap Decorations module. When browsers are up to date, the property can apply to multi-column containers as well as grid containers, flex containers, or any other container.

For detailed explanations on the possibilities of multi-column layout in CSS, refer to the columns property. For a summary on rules, see rule.

Values for column-rule-width.

  • column-rule-width: medium;

    Default value. Medium thickness line, about 4 pixels (this value may vary from one browser to another).

    Multi-columns
    Demo text. The space left empty between each pair of columns is called a 'gutter.' It's common practice to set the gutter width to the width of four average characters. You shouldn't confuse the gutter width with the thickness of the rule line that might be present.
    column-rule-width:medium;
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-width:medium;
    sur un conteneur flex-box.
  • column-rule-width: thin;

    Thin dividing line (about 1 pixel).

    Multi-columns
    Demo text. The space left empty between each pair of columns is called a 'gutter.' It's common practice to set the gutter width to the width of four average characters. You shouldn't confuse the gutter width with the thickness of the rule line that might be present.
    column-rule-width:thin;
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-width:thin;
    sur un conteneur flex-box.
  • column-rule-width: thick;

    Thick dividing line (around 6 pixels).

    Multi-columns
    Demo text. The space left empty between each pair of columns is called a 'gutter.' It's common practice to set the gutter width to the width of four average characters. You shouldn't confuse the gutter width with the thickness of the rule line that might be present.
    column-rule-width:thick;
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-width:thick;
    sur un conteneur flex-box.
  • column-rule-width: 15px;

    A positive number or zero, followed by a unit of measurement (see CSS dimension units).
    Percentages are not accepted.

    Multi-columns
    Demo text. The space left empty between each pair of columns is called a 'gutter.' It's common practice to set the gutter width to the width of four average characters. You shouldn't confuse the gutter width with the thickness of the rule line that might be present.
    column-rule-width:15px;
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-width:15px;
    sur un conteneur flex-box.
  • column-rule-width: medium, 15px, thin; column-rule-width: repeat(5, medium), 15px;

    A series of numbers that are positive or zero, followed by a unit of measurement, and separated by a comma.
    Each number is applied to one of the divider lines. If there are more lines than numbers, the list starts over from the beginning. You can also use the repeat() function if there are many lines.

    Multi-columns
    Demo text. The space left empty between each pair of columns is called a 'gutter.' It's common practice to set the gutter width to the width of four average characters. You shouldn't confuse the gutter width with the thickness of the rule line that might be present.
    column-rule-width:medium, 15px;
    Flex-box
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    column-rule-width:medium,15px;
    sur un conteneur flex-box.
  • column-rule-width: initial; (medium) column-rule-width: inherit; column-rule-width: revert; column-rule-width: revert-layer; column-rule-width: revert-rule; column-rule-width: unset;

    See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the column-rule-width property.

Like all properties that accept a numeric value, the column-rule-width property can be animated continuously (gradually changing from one value to another).

This animation also lets you see that the thickness of the net (controlled by column-rule-width) doesn’t change the width of the gutter (controlled by column-gap).

Demo text. The space left empty between each pair of columns is called a 'gutter.' It's common practice to set the gutter width to the width of four average characters. You shouldn't confuse the gutter width with the thickness of the rule line that might be present.

Simulator.

column-rule-width :
Multi-colonnes
In typography, a column is one or more vertical blocks of content positioned on a page, separated by gutters and/or rules (separator lines). Columns are most often used to break up long bodies of text that can't fit in a single text block on a page.
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

Browsers compatibility with column-rule-width.

Multi-column layouts are partially supported by recent browsers (see the table below); however, these incompatibilities are rarely a problem. The column-rule-width property is well recognized with its first specification, for multi-column containers, but not yet for grids or flex-boxes (2026).

Column 1
Support for column layouts, including handling column breaks.
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.

Notes:

(1) Does not support the values avoid (in the column context), avoid-column, and avoid-page for the properties break-after, break-before, and break-inside.

1
Multiple column
layout
2
column-rule-width
property
Estimated overall support.
18%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Safari

Safari sur IOS

Opéra

1

Chrome

1

Edge

1

Firefox

1

Chrome pour Androïd

1

Samsung Internet

1

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

1

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the column-rule-width property.

  • CSS Multi-column Layout Module Level 1

    This specification describes multi-column layout. It is enough to set the number of columns on the container, and the content will be arranged across the specified number of columns. Of course, other properties allow finer control over multi-column containers.
    This specification also defines properties concerning the space between columns and any possible dividing line.

    Regarding column-rule-width First description of multi-column layouts.
    Introduced related properties, including column-rule-width.
    WD
    June 23, 1999
    Working Draft.
    CR
    December 17, 2009
    Candidate Recommendation.
    PR
    REC

  • 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 column-rule-width The property column-rule-color was introduced in the Gap Decorations module, which will extend its use to grid and flexbox containers.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

See also, about multi-column layouts.

The specification CSS Multi-column Layout Module covers everything about multi-column layouts. So the property column-rule-width is referenced in this module, along with the terms below:

Properties:

column-count
Sets the number of columns, in a multi-column layout.
column-fill
Manages the distribution of content across columns.
⚠
column-height
Sets the height of the columns in the case of a multi-column layout. This height can be less than the height of the container, resulting in a kind of table.
column-rule
Shorthand property that defines all parameters of the separator trait between columns.
column-rule-color
Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
column-rule-style
Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container.
Column-rule-width
Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.
column-span
Langue française
Manages overlapping content across multiple columns.
column-width
Sets the width of the columns.
columns
Defines the characteristics of a multi-column layout.