<span>За замовчуванням, ширина межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює ключовому слову <em>medium</em>.</span>
<div class="multicol">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laudantium, labore, itaque sed doloribus voluptates quos quam suscipit animi odio repudiandae. Alias voluptas dolorem debitis corrupti quisquam velit laborum atque!</p>
</div>
<span>Але ми можемо змінити це, оголовиши властивість <code>column-rule-width</code> та прописавши для неї потрібне значення: ключове слово або число (значення у пікселях). Наприклад, для цього контейнера був прописана ширина у <em>8px</em>.</span>
<div class="multicol width">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque enim excepturi maxime architecto vitae harum laboriosam? Dolorem, esse rerum iste magni perferendis aliquam eum fuga excepturi minima quod, dolorum ea.</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; 

  -webkit-column-rule-color: gold;
     -moz-column-rule-color: gold;
          column-rule-color: gold;

  -webkit-column-rule-style: solid;
     -moz-column-rule-style: solid;
          column-rule-style: solid;  
}

.multicol.width {
  -webkit-column-rule-width: 8px;
    -moz-column-rule-width: 8px;
         column-rule-width: 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.