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

<section class="form">
  <span>Клікай тут: </span> <input type="color" class="input" id="val" onchange="change(this.value)"></input>
</section>

<div id="block">
  <p>Оголовиши властивість <code>column-rule-color</code> та прописавши для неї потрібне значення ми можемо змінити колір меж між стовпцями.</p>
</div>
body {
	padding: 36px;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

p {
  margin-top: 0;
}

.form {
  border-left: 4px solid #666;
  margin: 16px 0;
  padding: 16px 0 2px 15px;
  line-height: 1;
}

.input {
  margin-bottom: 16px;
  padding: 1px;
  font-size: 13px;
}

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

  /* 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;
}
function change(val) {
  block.style.columnRuleColor = val;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.