<p>Вибери потрібне значення для <code>column-rule-width</code>:</p>

<p>Ця властивість у багатоколонковому тексті задає ширину ліній між колонками. У цьому прикладі Ви побачите як на ширину меж впливає значення у пікселях.</p>

<input type="number" id="val" placeholder="число" value="1">

<hr>

<div id="block">
  <p>За замовчуванням, ширина межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює ключовому слову <em>medium</em>.</p>
<p>Але ми можемо змінити це, оголовиши властивість <code>column-rule-width</code> та прописавши для неї потрібне значення: ключове слово або число (значення у пікселях).</p>
</div>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p {
  margin-top: 0;
}

.inputs {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: #f1f1f1;
  padding: 10px;
  transition: column-rule-width .15s ease-in;

  -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-width: 1px;
     -moz-column-rule-width: 1px; 
          column-rule-width: 1px;

  -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;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}
$('#val').on('change', function() {
  $('#block').css('column-rule-width', $(this).val() + 'px');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js