Multiple Column Rules

This page covers CSS column rules, span, and width properties.

CSS Column Rule

The CSS column-rule-style property specifies the style of the vertical rule between columns:

Example

div
{

  column-rule-style: solid;

}

The CSS column-rule-width property specifies the width of the vertical rule between columns:

Example

div
{

  column-rule-width: 1px;

}

The CSS column-rule-color property specifies the color of the vertical rule between columns:

Example

div
{

  column-rule-color: lightblue;

}

The CSS column-rule property is a shorthand property for setting all the column-rule-* properties above.

Example

div
{

  column-rule: 1px solid lightblue;

}

CSS Column Span

The CSS column-span property specifies how many columns an element (typically a heading) should span across.

Example

h2 {

  column-span: all;
  text-align: center;

}

CSS Column Width

The CSS column-width property specifies a suggested, optimal width for each column.

Here, the browser will determine the number of columns based on this width and the available space.

Example

div {

  column-width: 100px;

}

CSS Multi-columns Properties

The following table lists all the multi-columns properties: