HTML5: Your visual blueprint™ for designing rich web pages and applications

ADD A RULER AND GAP IN BETWEEN COLUMNS

You can customize your multi-column layout further by adding a simple ruler border and extend the gap width in between each column:

selector {
 column-rule: width style color;
 -moz-column-rule: width style color;
 -webkit-column-rule: width style color;
 column-gap: size;
 -moz-column-gap: size;
 -webkit-column-gap: size;
}

The width value refers to the width of the column ruler line. The style value refers to the style of the line, which can be solid, dashed, or dotted. The color value can be any valid CSS color notation.

If column-gap’s size is unspecified, the default size is 1em. The unit em refers to multiples of the current font size. In most browsers, the default font size is 12 points, or one-sixth ...