column-rule

To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you’ve ever styled border, then you are ready to style column-rule.

.container {
  -webkit-columns: 2 400px;
     -moz-columns: 2 400px;
          columns: 2 400px;
  -webkit-column-rule: 1px solid black;
     -moz-column-rule: 1px solid black;
          column-rule: 1px solid black;
}

The property is shorthand for column-rule-width, column-rule-style, and column-rule-color, which is the same pattern as border and accepts the same values.

-webkit-column-rule-width: 1px;
   -moz-column-rule-width: 1px;
        column-rule-width: 1px;
-webkit-column-rule-style: solid;
   -moz-column-rule-style: solid;
        column-rule-style: solid;
-webkit-column-rule-color: black;
   -moz-column-rule-color: black;
        column-rule-color: black;

column-rule-width can be a length like 3px or a keyword value like thin.

column-rule-style can be any of the border-style values like solid, dotted, and dashed.
column-rule-color can be any color value.

<div class='example example-dotted'>
  <h1>dotted</h1>
  <p>This example uses <code>column-rule-style: dotted;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-dashed'>
  <h1>dashed</h1>
  <p>This example uses <code>column-rule-style: dashed;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-solid'>
  <h1>solid</h1>
  <p>This example uses <code>column-rule-style: solid;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-double'>
  <h1>double</h1>
  <p>This example uses <code>column-rule-style: double;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-groove'>
  <h1>groove</h1>
  <p>This example uses <code>column-rule-style: groove;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-ridge'>
  <h1>ridge</h1>
  <p>This example uses <code>column-rule-style: ridge;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-inset'>
  <h1>inset</h1>
  <p>This example uses <code>column-rule-style: inset;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-outset'>
  <h1>outset</h1>
  <p>This example uses <code>column-rule-style: outset;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-none'>
  <h1>none</h1>
  <p>This example uses <code>column-rule-style: none;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>
<div class='example example-hidden'>
  <h1>hidden</h1>
  <p>This example uses <code>column-rule-style: hidden;</code>.</p>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p>Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Nulla vitae magna sed sapien ultricies dapibus a non libero. Sed posuere metus a pellentesque mattis.</p>
</div>

.example {
  -webkit-columns: 3 150px;
  -moz-columns: 3 150px;
  columns: 3 150px;
  -webkit-column-gap: 5em;
  -moz-column-gap: 5em;
  column-gap: 5em;
  -webkit-column-rule-width: 4px;
  -moz-column-rule-width: 4px;
  column-rule-width: 4px;
  -webkit-column-rule-color: #e74c3c;
  -moz-column-rule-color: #e74c3c;
  column-rule-color: #e74c3c;
  margin: 2em auto 7em;
}

.example-dotted {
  -webkit-column-rule-style: dotted;
  -moz-column-rule-style: dotted;
  column-rule-style: dotted;
}

.example-dashed {
  -webkit-column-rule-style: dashed;
  -moz-column-rule-style: dashed;
  column-rule-style: dashed;
}

.example-solid {
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  column-rule-style: solid;
}

.example-double {
  -webkit-column-rule-style: double;
  -moz-column-rule-style: double;
  column-rule-style: double;
}

.example-groove {
  -webkit-column-rule-style: groove;
  -moz-column-rule-style: groove;
  column-rule-style: groove;
}

.example-ridge {
  -webkit-column-rule-style: ridge;
  -moz-column-rule-style: ridge;
  column-rule-style: ridge;
}

.example-inset {
  -webkit-column-rule-style: inset;
  -moz-column-rule-style: inset;
  column-rule-style: inset;
}

.example-outset {
  -webkit-column-rule-style: outset;
  -moz-column-rule-style: outset;
  column-rule-style: outset;
}

.example-none {
  -webkit-column-rule-style: none;
  -moz-column-rule-style: none;
  column-rule-style: none;
}

.example-hidden {
  -webkit-column-rule-style: hidden;
  -moz-column-rule-style: hidden;
  column-rule-style: hidden;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

h1 {
  font-size: 4em;
  padding: 0.5em 0;
  text-align: center;
  font-family: "Courier New", monospace;
}

code {
  font-family: "Courier New", monospace;
  background: white;
  border-radius: 0.2em;
  padding: 0 0.2em;
}

Unlike column-gap, column-rule doesn’t take up space. If the column-rule-width is thicker than the column-gap then the rule will expand underneath the columns.

<div class="example">
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et. Sed posuere metus a pellentesque mattis.</p>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus. Proin sit amet euismod justo, egestas auctor eros. Cras porta bibendum orci nec dapibus. </p>
  <p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor. Vestibulum tempus magna auctor purus elementum congue.</p>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at augue eros. Nam tincidunt mi eu malesuada molestie.</p>
  <p>Quaerat distinctio, facere sed magni adipisci ex beatae et architecto soluta unde cumque dolorem dicta molestias maxime non inventore, odio incidunt, libero.</p>
</div>

.example {
  -webkit-columns: 3 150px;
  -moz-columns: 3 150px;
  columns: 3 150px;
  -webkit-column-gap: 50px;
  -moz-column-gap: 50px;
  column-gap: 50px;
  -webkit-column-rule: 100px solid #e74c3c;
  -moz-column-rule: 100px solid #e74c3c;
  column-rule: 100px solid #e74c3c;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 2em 1em 0;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

The vertical rule will only exist between columns that have content.

Related Properties

• columns
• column-fill
• column-gap
• column-count
• column-span
• column-width

Browser Support

Multi-column layout support:

Don’t forget your prefixes!