<span>За замовчуванням, стиль межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює <em>none</em>. Тобто не показується.</span>
<div class="multicol">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere quia debitis corporis reprehenderit, quo, sequi ad inventore officia quos dolorem, error nam omnis. Odio corporis vel pariatur unde, ullam perspiciatis.</p>
</div>
<span>Але ми можемо змінити це, оголовиши властивість <code>column-rule-style</code> та прописавши для неї потрібний стиль. Наприклад, для цього контейнера був прописаний стиль <em>solid</em> (суцільна лінія).</span>
<div class="multicol style">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus laboriosam iste exercitationem maiores totam unde? Adipisci, dicta sit a non aliquid voluptatem nam hic nesciunt accusamus! Explicabo enim reprehenderit nostrum.</p>
</div>
body {
font-family: sans-serif;
line-height: 1.45;
}
p {
margin-top: 0;
}
.multicol {
background: #f1f1f1;
padding: 10px;
margin-bottom: 16px;
column-gap: 38px;
column-gap: 38px;
column-gap: 38px;
column-count: 3;
column-count: 3;
column-count: 3;
column-rule-color: gold;
column-rule-color: gold;
column-rule-color: gold;
column-rule-width: 4px;
column-rule-width: 4px;
column-rule-width: 4px;
}
.multicol.style {
column-rule-style: solid;
column-rule-style: solid;
column-rule-style: solid;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.