The 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;
}

The column-rule property

Example . The solid type

Example . The column-gap effect

See also