Columnrule

Column-rule is a CSS property used in the CSS Multi-column Layout Module to define the appearance of the vertical rules that separate columns in a multi-column container. It is a shorthand that sets the column-rule-width, column-rule-style, and column-rule-color in a single declaration.

Syntax and usage

The shorthand takes the form column-rule: width style color, with any part optional. Example: column-rule: 2px solid #333;. The rule is applied only when the container is laid out with multiple columns (for example, via column-count or column-width) and creates a visible separator between adjacent columns. It does not affect the content inside the columns.

Values

- width: a length (such as 1px, 2px) or the keywords thin/medium/thick.

- style: one of none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

- color: any valid CSS color value (hex, rgb/rgba, hsl/hsla, named colors, etc.).

If the style is none or hidden, no rule is drawn. The color and width apply to the drawn separator between columns.

Longhand properties

The individual properties column-rule-width, column-rule-style, and column-rule-color can be used separately for finer control.

Browser support and behavior

Column-rule is widely supported in modern browsers. The rules appear between columns and respect the column-gap value. If there is only one column, no vertical rule is rendered.

Example

column-count: 3;

column-rule: 2px solid #7a7a7a;

column-gap: 20px;