Para tornar as colunas distintas, você pode adicionar uma linha vertical entre cada coluna. A linha fica no centro da lacuna da coluna. Se você já estilizou border, está pronto para estilizar column-rule.
.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )A propriedade é uma abreviação para column-rule-width, column-rule-stylee column-rule-color, que é o mesmo padrão bordere aceita os mesmos valores.
-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;column-rule-widthpode ser um comprimento 3pxou um valor de palavra-chave como thin.
column-rule-stylepode ser qualquer um dos border-stylevalores como solid, dotted, e dashed.
column-rule-color pode ser qualquer valor de cor.
Ao contrário column-gap, column-rulenão ocupa espaço. Se o column-rule-widthfor mais espesso do que o column-gap, a regra se expandirá abaixo das colunas.
A regra vertical existirá apenas entre colunas que possuem conteúdo.
Suporte para navegador
Suporte para layout de várias colunas:
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | 3+ | 1.5+ | 11,1+ | 10+ | 2,3+ | 6,1+ |
Não se esqueça dos seus prefixos!