Propriedade column-rule

A propriedade column-rule define uma borda entre colunas em texto multicoluna. Em termos de valores aceitos, coincide com a propriedade border.

Exemplo . Tipo solid

Neste exemplo, o texto será dividido em 3 colunas com bordas entre as colunas na forma de uma linha sólida com espessura de 1px (a distância entre as colunas será formada automaticamente, pois column-gap está definido com o valor normal):

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

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

Результат:

Exemplo . Influência do column-gap

Neste exemplo, o texto será dividido em 3 colunas com um espaçamento entre elas de 50px. A borda passará pelo meio do espaçamento (à direita e à esquerda da borda haverá 25px cada):

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

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

Результат:

Veja também