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

<p>Ця властивість у багатоколонковому тексті задає стиль ліній між колонками. Якщо стиль явно не вказано, то колір тексту в колонках і колір ліній між ними збігається.</p>

<div class="inputs">
  <input id="none" checked name="column-rule-style" type="radio"/>
  <label for="none">none</label>
  <message for="none">Лінія не відображається і її товщина обнуляється.</message>
  
  <input id="hidden" name="column-rule-style" type="radio"/>
  <label for="hidden">hidden</label>
  <message for="hidden">Прихована лінія. Аналогічно none.</message>
  
  <input id="dotted" name="column-rule-style" type="radio"/>
  <label for="dotted">dotted</label>
  <message for="dotted">Пунктирна лінія з набору точок.</message>
  
  <input id="dashed" name="column-rule-style" type="radio"/>
  <label for="dashed">dashed</label>
  <message for="dashed">Пунктирна лінія з серії коротких відрізків.</message>
  
  <input id="solid" name="column-rule-style" type="radio"/>
  <label for="solid">solid</label>
  <message for="solid">Суцільна лінія.</message>
  
  <input id="double" name="column-rule-style" type="radio"/>
  <label for="double">double</label>
  <message for="double">Подвійна лінія.</message>
  
  <input id="groove" name="column-rule-style" type="radio"/>
  <label for="groove">groove</label>
  <message for="groove"> 	Створює ефект втисненої лінії. Ефект залежить від значень ширини і кольору.</message>
  
  <input id="ridge" name="column-rule-style" type="radio"/>
  <label for="ridge">ridge</label>
  <message for="ridge">Створює ефект рельєфної лінії. Ефект залежить від значень ширини і кольору.</message>
  
  <input id="inset" name="column-rule-style" type="radio"/>
  <label for="inset">inset</label>
  <message for="inset">Створює об'ємну лінію.</message>
  
  <input id="outset" name="column-rule-style" type="radio"/>
  <label for="outset">outset</label>
  <message for="outset">Створює об'ємну лінію.</message>
</div>

<p id="message">Лінія не відображається і її товщина обнуляється.</p>

<hr>

<div id="block">
  <p>За замовчуванням, стиль межі (між стовпчиками у багатоколонковому тексті, як тут) дорівнює <em>none</em>. Тобто не показується.</p>
<p>Але ми можемо змінити це, оголовиши властивість <code>column-rule-style</code> та прописавши для неї потрібний стиль.</p>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

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

p {
  margin-top: 0;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: #f1f1f1;
  padding: 10px;
  margin-bottom: 16px;

  -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-width: 12px;
    -moz-column-rule-width: 12px;
         column-rule-width: 12px;
  
  -webkit-column-rule-style: none;
     -moz-column-rule-style: none;
          column-rule-style: none;
}

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

message {
  display: none;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('column-rule-style', $(this).attr('id'));
  
});