`Column-rule-style` - CSS Property

column-rule-style

Summary of characteristics of the `column-rule-style` property

Quick description

Choose the type of line for separating columns, in the context of a multi-column layout, a flex container, or a grid container.

Status

Standard

Predefined values

Percentages

Not applicable.

Initial value

none

Inherited by default

No.

Animation type

Discrète: during an animation, the column-rule-style property passes from one value to another without transition.

Canonical order

Per grammar: serialization in the order of syntax.

W3C Module

CSS Multi-column Layout Module

References (W3C)

🡇

🡅

CSS Gap Decorations Module Level 1.

Document status: WD (Working Draft)

CSS Multi-column Layout Module Level 1

Document status: CR (Candidate Recommendation)

Syntax diagram of `column-rule-style`.

Syntax diagram of the column-rule-style 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:

Several values can be listed by separating them with a comma.

Description of the `column-rule-style` property.

column-rule-style defines the style of the column separator line. The same options are available as for border styles.

Refer to the shorthand property column-rule for an overview of all the settings related to separator lines, and to the columns page for a general overview of column layouts using CSS.

Originally intended for gutters between columns in a multi-column container, the property column-rule-style is now described in the CSS Gap Module. As soon as browsers are up to date, my property will be able to apply to both multi-column containers as well as grid or flex containers. On this topic, you can also check out the page on rule for a general overview of gutters.

Values for `column-rule-style`.

column-rule-style: none;

Default value. No dividing line between the columns.
column-rule-style: hidden;

Invisible separator line. Since the thickness of the separator line doesn't change the width of the gutter (gap), this value is equivalent to none.
column-rule-style: solid;

Several line styles are available. They correspond to the following values:

solid
A simple line

double
A double line

dotted
A series of dots

dashed
A series of dashes

groove
A line with 3D effect: groove ⁽¹⁾

ridge
A line with 3D effect: ridge ⁽¹⁾

inset
A line with 3D effect: dig ⁽²⁾

outset
A line with 3D effect: embossed ⁽²⁾

(1)The 3D effects are only visible if the line thickness is at least 3 pixels. In our examples, the thickness is 5 pixels.

(2) The inset and outset effects are not well suited for column divider lines. Indeed, these effects require perpendicular lines, like in a border around an element. Applied to a simple vertical line, they only cause the line's color to lighten or darken.
column-rule-style: dotted, solid; column-rule-style: repeat(2, dotted), solid;

When several values are indicated, separated by a comma, they apply successively to the different separation marks. If there are more separation marks than values, the list starts over from the beginning. You can also use the repeat() function when the number of marks is large.

Firefox and other browsers don't handle this possibility yet (2026).
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;

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

Animation of the `column-rule-style` property.

The property column-rule-style animates really well, but of course in a discontinuous way since it only accepts predefined values.

In typography and printing, a gutter is the vertical space separating two columns of justified text, either aligned to the right or to the left. This gutter can also have a line to separate the columns. A gutter can also be extra space added to the margins of a document on the binding side. It helps make sure that the content doesn't get lost in the binding when the pages are put together.

Browsers compatibility with `column-rule-style`.

Multi-column layouts are relatively well supported by recent browsers, even though there are still some incompatibilities, as you can see in the table below.
However, the column-rule-style property is well recognized in the context of a column layout, but not yet for grids and flex-boxes (2026). Column 2 of the table only deals with the application of column-rule-style to a multi-column container.

Column 1

Support for column layouts, including handling column breaks.

Column 2

Support for the property column-rule-style 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.

Multiple column
layout

column-rule-style
property

Estimated overall support.

18%

96%

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 `column-rule-style` property.