Proprietà column-rule

La proprietà column-rule imposta un bordo tra le colonne in un testo multicolonna. Nei valori accettati coincide con la proprietà border.

Esempio . Tipo solid

In questo esempio il testo verrà suddiviso in 3 colonne con bordi tra le colonne sotto forma di linea continua spessa 1px (la distanza tra le colonne si formerà automaticamente, poiché è impostato column-gap con valore normal):

<div id="elem">
	some long text
</div>

#elem {
	column-rule: 1px solid black;
	column-count: 3;
	column-gap: normal;
	text-align: justify;
}

Esempio . Influenza di column-gap

In questo esempio il testo verrà suddiviso in 3 colonne con un intervallo tra loro di 50px. Il bordo passerà al centro dell'intervallo (a destra e a sinistra del bordo ci saranno 25px ciascuno):

<div id="elem">
	some long text
</div>

#elem {
	column-rule: 1px solid black;
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

Vedi anche

proprietà column-width,
che imposta la larghezza della colonna
proprietà column-count,
che imposta il numero di colonne
proprietà column-gap,
che imposta l'intervallo tra le colonne
proprietà column-span,
che imposta il numero di colonne su cui un elemento deve estendersi
proprietà columns,
che è una proprietà abbreviata per il layout multicolonna