column-rule

Draws a line between the columns of a multi-column layout. A shorthand for the line’s width, style, and color.

Initial value: medium none currentcolor
Inherited: No
Animatable: yes, width and color
Applies to: multi-column containers
JavaScript: element.style.columnRule = "1px solid #525252"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.glossary {
  columns: 2;
  column-gap: 32px;
  column-rule: 1px solid #3f3f46;
}

.glossary div {
  break-inside: avoid;
  margin-bottom: 10px;
}

Example HTML

<style>
  .glossary { margin: 0; }
  .glossary dt { font-weight: 600; }
  .glossary dd { margin: 0; color: #a1a1aa; font-size: 14px; }
</style>
<dl class="glossary">
  <div><dt>Selector</dt><dd>targets the elements that will get the style</dd></div>
  <div><dt>Property</dt><dd>the characteristic you change, e.g. color</dd></div>
  <div><dt>Value</dt><dd>what you assign to the property</dd></div>
  <div><dt>Specificity</dt><dd>a selector’s weight when several rules conflict</dd></div>
</dl>

Preview

Definition and usage

The column-rule property draws a vertical line between the columns of a container with columns or column-count. It’s a shorthand for column-rule-width, column-rule-style, and column-rule-color, and it’s written just like border, for example column-rule: 1px solid #3f3f46.

The line takes up no space. It sits in the middle of the gap set by column-gap and doesn’t widen it, so with a thick line and a narrow gap, the line will run under the text. If you need more breathing room around the line, increase column-gap.

Just like with a border, nothing shows up without a style, since the default style is none. Lines only appear between columns that have content. There’s none before the first column or after the last.

Syntax

column-rule: <width> || <style> || <color>;

Values

1px solid #525252
A thin, gray, solid line. A classic, understated separator.
2px dashed #f59e0b
A dashed line in amber.
6px double #a78bfa
A double line. It needs at least 3px of width for both strokes to be visible.
3px dotted #38bdf8
A dotted line in sky blue.
none
No line, just the plain gap between the columns.

Value	Description
1px solid #525252	A thin, gray, solid line. A classic, understated separator.
2px dashed #f59e0b	A dashed line in amber.
6px double #a78bfa	A double line. It needs at least 3px of width for both strokes to be visible.
3px dotted #38bdf8	A dotted line in sky blue.
none	No line, just the plain gap between the columns.

Values in practice

1px solid #525252

A thin, gray, solid line. A classic, understated separator.

.demo { column-rule: 1px solid #525252; }

2px dashed #f59e0b

A dashed line in amber.

.demo { column-rule: 2px dashed #f59e0b; }

6px double #a78bfa

A double line. It needs at least 3px of width for both strokes to be visible.

.demo { column-rule: 6px double #a78bfa; }

3px dotted #38bdf8

A dotted line in sky blue.

.demo { column-rule: 3px dotted #38bdf8; }

none

No line, just the plain gap between the columns.

.demo { column-rule: none; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

On a dark background, a low-contrast line is enough, for example #3f3f46. The separator should organize the content, not grab attention.
The line doesn’t widen the gap. With a thicker line, increase column-gap too, so the text doesn’t touch the separator.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course