Column-rule - CSS Property

column-rule
column-rule-width
column-rule-style
column-rule-color

Summary of characteristics of the column-rule property

Quick description
Shorthand property that defines all parameters of the separator trait between columns.
Status
Standard
Percentages
Not applicable.
Initial value
See individual properties.
Inherited by default
No.
Animation type
See individual properties.
Canonical order
Per grammar: serialization in the order of syntax. Values can be entered in any order.
W3C Module
CSS Multi-column Layout Module
References (W3C)
 🡇  
 🡅  
Document status: CR (Candidate Recommendation)
Document status: WD (Working Draft)

Syntax diagram of column-rule.

Column-rule - Syntax DiagramSyntax diagram of the column-rule CSS property. column-rule-width column-rule-width , , column-rule-syle column-rule-syle column-rule-color column-rule-colorcolumn-rule:;column-rule:;
Syntax diagram of the column-rule property.
Download the diagram in SVG.

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

  • column-rule is a shorthand property that combines column-rule-width, column-rule-style, and column-rule-color. On diagram, these terms correspond to the syntaxes of the corresponding properties. Refer to their respective pages.
  • The syntax can be repeated several times with a comma as a separator.

Description of the column-rule property.

column-rule} defines the divider between columns, in the case of a multi-column layout, and, since it is described in the CSS Gap Decorations module, for a flex container, a grid container, or any other container that displays columns. Although this last possibility is currently only supported by Chrome   or Edge  .

column-rule is a shorthand property that brings together several pieces of information:

Defines the thickness of the separating line between columns, in the context of a multi-column layout, a flex container, or a grid container.
Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container. Ce paramètre est nécessaire.
Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
Rule
↓
In the case of a column layout, it is possible to display a line in the space between the columns. This line can be customized in terms of width, line style, and color thanks to the property column-rule.

Here is the effect of column-rule in the case of a grid container or a flex container. ⚠ This will only work on Chrome   or on Edge  .

Grid
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
Effect of column-rule
on a grid container.
.
Flex-box
A
B
C
D
E
F
G
H
I
J
K
L
Effect of column-rule
on a flex-box container.
.


You can check out the page on rule for a summary of everything about nets.

Values for column-rule.

  • column-rule: 5px dashed red;

    column-rule accepts values for the thickness, style, and color of column divider lines, in a grid container, flex-box, multi-column, or any other container that supports multiple columns.

    If a value is not specified, it is set to the default value. Warning! The default value of column-rule-style is none. This means that a value for the style is required, otherwise the line will not be visible.

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

    It is possible to repeat several sets of values by separating them with a comma. The function repeat() is supported. In the example below, there are two successive red lines, 5 pixels double, followed by a solid line in black with medium thickness. This pattern continues until the end of the borders.

    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
    column-rule:repeat(2,5px double red),solid;
  • column-rule: initial; column-rule: inherit; column-rule: revert; column-rule: revert-layer; column-rule: revert-rule; column-rule: unset;
    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;
    column-rule-style: initial; (none) column-rule-style: inherit; column-rule-style: revert; column-rule-style: revert-layer; column-rule-style: revert-rule; column-rule-style: unset;
    column-rule-color: initial; (currentcolor) column-rule-color: inherit; column-rule-color: revert; column-rule-color: revert-layer; column-rule-color: revert-rule; column-rule-color: unset;

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

Examples with the column-rule property.

In this first example, we only defined the stroke style (the only required parameter). The thickness and color were set to their default values, namely medium for the stroke width and currentColor for the color. Indeed, like all the summarized properties, column-rule initializes all the relevant values, setting the unspecified parameters to their default.
This second example is a special case: the width of the divider line has been set to a value larger than the width of the gutter (see column-gap). The aesthetics of the result are probably questionable, but this example clearly shows that the width of the divider line is not added to the width of the gutter.
On the other hand, you can see that the divider line encroaches on the text of the columns, but it still stays behind it. So there’s no risk of the divider line hiding the column content.

Animation of the column-rule property.

Refer to the pages on long-hand properties for examples of animation.

Simulator.

You can see here the effect of column-rule on a multi-column container and a grid container. This would also work with a flex-box container.

⚠Of course, this simulator only works on browsers that fully recognize the column-rule property.

column-rule :
Multi-column
This text is arranged in a layout with two columns. The separator line between these columns can be adjusted. Its features are the line thickness, the line style, and the color.
Grid
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P

Browsers compatibility with column-rule.

Multi-column layouts are fairly well supported by recent browsers, even though there are still some inconsistencies. The following columns of the table (2 to 5) only concern the use of properties on a multi-column container. As for grid or flex-box containers, compatibility is lower: only Chrome   and Edge   handle the properties correctly.

Column 1
Support for column layouts, including handling column breaks.
Column 2
Support for the shorthand property column-rule, which defines the parameters for the column separation lines in a column layout.
Column 3
Support for the property column-rule-width, defining the thickness of the column separator line, in the case of a multi-column layout.
Column 4
Support for the property column-rule-style in the case of a multi-column layout.
Column 5
Support for the column-rule-color property to set the color of column separator lines in a grid, flex-box, etc.

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
property
3
column-rule-width
property
4
column-rule-style
property
5
column-rule-color
property
Estimated overall support.
18%
96%
96%
96%
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
Caniuse
Caniuse
Caniuse

Historic of the column-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 column-rule Transfer of the column-rule property description into this module.
    WD
    April 17, 2025
    Working Draft.
    CR
    PR
    REC

  • 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 First description of multi-column layouts.
    And introduction of related properties, including the shorthand property column-rule.
    WD
    June 23, 1999
    Working Draft.
    CR
    December 17, 2009
    Candidate Recommendation.
    PR
    REC

See also, about column layouts.

Multi-column layouts are described in the specification CSS Multi-column Layout Module. The property column-rule is explained in this module. You will also find the reference for 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.