<span>За замовчуванням, колір межі (між стовпчиками у багатоколонковому тексті, як тут) такий же як і колір основного тексту. Тобто дорівнює ключовому слову <em>CurrentColor</em>.</span>
<div class="multicol">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, similique. Ullam et cum illo vitae, repellendus temporibus necessitatibus quam. Eos, perferendis! Beatae ratione quas inventore at voluptatibus nesciunt rem neque.</p>
</div>
<span>Але ми можемо змінити це, оголовиши властивість <code>column-rule-color</code> та прописавши для неї потрібний колір. Наприклад, для цього контейнера був прописаний колір <em>gold</em>.</span>
<div class="multicol color">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati libero, saepe ullam ex illo dignissimos blanditiis tenetur consequuntur repellat temporibus aliquid. Provident corrupti omnis molestiae a fugit soluta animi hic..</p>
</div>body {
font-family: sans-serif;
line-height: 1.45;
}
p {
margin-top: 0;
}
.multicol {
background: #f1f1f1;
padding: 10px;
margin-bottom: 16px;
margin-top: 15px;
-webkit-column-gap: 38px;
-moz-column-gap: 38px;
column-gap: 38px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
/* Safari and Chrome */
-webkit-column-rule-width: 4px;
-webkit-column-rule-style: dashed;
/* Firefox */
-moz-column-rule-width: 4px;
-moz-column-rule-style: dashed;
/* CSS3 */
column-rule-width: 4px;
column-rule-style: dashed;
}
.multicol.color {
-webkit-column-rule-color: gold;
-moz-column-rule-color: gold;
column-rule-color: gold;
}
span{
font-size: 18px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.