`column-rule-width` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Learn more
See full compatibility

The column-rule-width CSS property defines the widths of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.

Try it

column-rule-width: thin;

column-rule-width: 4px;

column-rule-width: thin, medium, thick;

column-rule-width: repeat(2, 1px, thick), 10px;

column-rule-width: 10px, repeat(auto, 1px, 2px), 10px;

<section id="default-example">
  <p id="example-element">
    London. Noel term lately over, and the Lord George sitting in Lincoln's Inn
    Hall. Great May weather. As much mud in the streets as if the waters had but
    newly retired from the face of the earth, and it would not be weird to meet
    an platypus, two feet long or so, waddling like an lizard up Morgan Hill.
  </p>
</section>

#example-element {
  columns: 6;
  column-rule-style: solid;
  column-rule-color: teal;
  gap: 7px;
}

Syntax

css

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
column-rule-width: thin, medium, thick;
column-rule-width: thick, repeat(5, thin), thick;
column-rule-width: thick, repeat(auto, thin, medium), thick;

/* Length values */
column-rule-width: 0.1em;
column-rule-width: 5px;
column-rule-width: 1px, 3px, 5px;
column-rule-width: 0.1rem, repeat(auto, 1px), 10px, 0.5rem;
column-rule-width: 5px, repeat(5, 1px, 3px), 5px;

/* Global values */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: revert-layer;
column-rule-width: unset;

Values

The column-rule-width property accepts a comma-separated list of values, including:

<line-width>: Defines the width of the line, either as an explicit non-negative <length> or the keywords: thin, medium, or thick. The default is medium.
<repeat-line-width>: A repeat() function, with the first argument being an <integer> of 1 or more, and one or more <line-width> values as subsequent arguments. The integer defines the number of times the <line-width> values should be repeated.
<auto-repeat-line-width>: A repeat() function, with auto as the first argument and one or more <line-width> values as subsequent arguments. The provided <line-width> values are repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.

Description

The column-rule-width property defines the widths of any column rule lines drawn in the gutters between adjacent columns in multi-column, flex, and grid containers with more than one column.

Note: The column-rule-width only defines the width of the lines painted in the gaps. These lines have no effect on the box model or layout. The size of the gutter is defined by the gap property; with the default value being 1em on multi-column containers and 0 in all other contexts. If the width of a rule is wider than the gap, the line will be painted behind the column content.

The value is a comma-separated list of components, which can include <line-width>, <repeat-line-width>, and <auto-repeat-line-width> types.

The column-rule-width, along with the column-rule-color and column-rule-style properties, can also be set using the column-rule shorthand, while rule-width is a shorthand that sets both the column-rule-width and the row-rule-width properties.

A <line-width> can be declared as any valid CSS <line-width> value: the keywords thin, medium, or thick, or a positive <length> value. Percentage values are invalid.

If the property value consists of only one <line-width>, all the column rules will be that width. If we declare the following, all column rules will be 2px:

css

column-rule-width: 2px;

When more than one <line-width> is declared, they will be applied to column-rules in the order specified. If there are more column-rules than <line-width> values, the list of line widths is repeated until every rule has a width. If we declare the following, for example, every odd rule will be thick, and every even rule will be 0.25rem.

css

column-rule-width: thick, 0.25rem;

Repeated line widths

The repeat() function, with an integer of 1 or greater as the first argument, can be used to repeat a valid list of CSS <line-width> values passed as subsequent arguments the specified number of times. This allows the same width to be repeated a set number of times without repeating the same <line-width> multiple times. The following declarations are equivalent:

css

column-rule-width: 1rem, thick, thin, thick, thin, thick, thin;
column-rule-width: 1rem, repeat(3, thick, thin);

You can use any <line-width> values, including custom properties that resolve to a <line-width>. Using repeat() can make values easier to write, especially when using complex length calculations. It enables a recurring pattern to be written using a single function, regardless of the number of columns. The following declarations are equivalent:

css

column-rule-width:
  1rem, min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)),
  min(calc(var(--base) - 3px), 10px), abs(calc(var(--secondary) - 30px)), thin;
column-rule-width:
  1rem,
  repeat(
    5,
    min(calc(var(--base) - 3px), 10px),
    abs(calc(var(--secondary) - 30px))
  ),
  thin;

This creates a list of 12 widths. If the number of widths in the column-rule-width value's width list exceeds the number of gaps between columns, the excess width values are ignored. If the container has three columns, the rule in the first gutter will be 1rem wide, and the second is determined by the min() function.

If there are more gutters than widths, the list of widths is repeated. If the container has 13 or 25 columns, this sequence of widths will be repeated one or two, respectively, with the last rule being thin. For any other number of columns, up to 25, the last rule will not be thin.

Auto-repeating line widths

The repeat() function also accepts auto as the first argument instead of a positive integer. With auto as the first argument, the list of <line-width> values passed as subsequent arguments will be repeated as many times as needed to fill in values for any column-rules that are not explicitly specified by other components of the property value.

css

column-rule-width: 10px, repeat(auto, thin), 10px;

In this case, the first column rule will be 10px, the last will be 10px, and all others will be thin. It doesn't matter if the container has 3, 6, 11, 16, or 21 columns, the first and last columns will always be 10px. Which means, if there are only 2 or 3 columns, there will be no thin-sized column rules.

The auto keyword within the repeat() function creates an auto-repeater that fills in values for the row-rule line widths that would not otherwise receive values from other parts of the list, preventing the list from being cycled. A column-rule-width value can include, at most, one repeat(auto, <line-width>).

Formal definition

Initial value	`medium`
Applies to	multicol elements
Inherited	no
Computed value	the absolute `<length>`, snapped as a line width
Animation type	a length

Formal syntax

column-rule-width = 
  <line-width-list>       |
  <auto-line-width-list>  

<line-width-list> = 
  <line-width-or-repeat>#  

<auto-line-width-list> = 
  <line-width-or-repeat>#? , <auto-repeat-line-width> , <line-width-or-repeat>#?  

<line-width-or-repeat> =

column-rule-width CSS property

`column-rule-width` CSS property