Shorthand to set the width, style and color of the rule between columns.

      column-rule: Column-rule-width Column-rule-style Column-rule-color ;

This shorthand is equivalent to the following:

element {
  column-rule-width thin | medium | thick | length;
  column-rule-style: RuleStyle;
  column-rule-color: color;

h1 { column-rule-width: 2px dotted #0000ff; }
.emw3class { column-rule-width: 4px solid #339966; }

#emw3id { column-rule-width: thick double blue; }

Try it:

When text is displayed in newspaper columns the length of each line is much shorter. This is a great aid to readability. On the internet many people will skim read large blocks of text and this can have the unfortunate effect that they miss important points buried in a long paragraph.

(CSS 3) Browser Support: IE 10, Opera. Use the equivalent -moz-column-rule for Firefox and -webkit-column-rule for Safari and Chrome.

“I don't want anyone reading my writing to think about style. I just want them to be in the story” ~ Willa Sibert Cather


column-rule - MDN Web Docs.
column-gap - Gap between the columns.
column-rule-color - Color of the rule between columns.
column-rule-style - Style of the rule between columns.
column-rule-width - Width of the rule between columns.

Copyright © 2013-2022
Some rights reserved