# column-rule property

The `column-rule` property specifies a border between columns in multi-column text. The accepted values ​​coincide with the `border` property.

## Example . The solid type

In this example, the text will be divided into `3` columns with borders between the columns in the form of a solid line with a thickness of `1px` (a gap between the columns will be generated automatically, since `column-gap` in the `normal` value):

`<div id="elem"> some long text </div>` `#elem { column-rule: 1px solid black; column-count: 3; column-gap: normal; text-align: justify; }`

:

## Example . The column-gap effect

In this example, the text will be divided into `3` columns with the gap between them of `50px`. The border will go through the middle of the gap (to the right and left of the border there will be the space of `25px`):

`<div id="elem"> some long text </div>` `#elem { column-rule: 1px solid black; column-count: 3; column-gap: 50px; text-align: justify; }`

:

## See also

- the `column-width` property
  that specifies a column width
- the `column-count` property
  that specifies a number of columns
- the `column-gap` property
  that specifies a gap between columns
- the `column-span` property
  that specifies a number of columns an element should span
- the `columns` property
  that is a shorthand property for multi-column

← →
↑
en ru