CSS Reference Property

column-rule-width

The column-rule-width property is used to set the width of the column rule between adjacent columns in a multi-column layout.

A column rule is kind of like a border that you can add to separate adjacent columns in the same multi-column layout. It can even have styles like those a border can have, and the same width values. See the values section below for a list of possible values.

A column rule is drawn only between adjacent columns; that is, it is not drawn before the first column, nor is it drawn after the last column.

A column rule does not take up any space. This means that adding a column rule will not increase the amount of space, or the gap (see column-gap), between the columns.

Official Syntax

  • Syntax:

    column-rule-width: <length> | thin | medium | thick
  • Initial: medium
  • Applies To: multi-column elements
  • Animatable: yes, as a length

Values

<length>
The width of the column rule is set to the specified length. See the <length> entry for a list of possible values. Negative values are not allowed.
thin
A thin column rule. Implementation-specific. See note below and the live demo for examples.
medium
A medium column rule. Implementation-specific. See note below and the live demo for examples.
thick
A thick column rule. Implementation-specific. See note below and the live demo for examples.

Notes

The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific, but the values are constant throughout a document and thin ? medium ? thick. A browser could, for example, make the thickness depend on the medium font size: one choice might be 1px (for thin), 3px (for medium) & 5px (for thick) when the medium font size is 17px or less.

Examples

The following will apply a pink-colored thin column rule to a multi-column element:

.mag {
    columns: 12em;
    column-rule-width: thin;
    column-rule-style: solid;
    column-rule-color: #0099CC;
}
                

The following are all possible column-rule-width values:

column-rule-width: 5px;
column-rule-width: 10%;
column-rule-width: thick;
column-rule-width: 2em;
                

Live Demo

Change the column rule width in the following demo to see how it is drawn. You should also notice how, no matter how thin or thick the rule gets, it does not affect the space between the columns specified using the column-gap property.

View this demo on the Codrops Playground

Browser Support

CSS3 Multiple column layout

Method of flowing information in multiple columns

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 50
  • 52
  • 10
  • 11
  • 10

Mobile / Tablet

  • 10
  • 56
  • all
  • 61
  • 56

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:25 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.