column-rule-style — стиль лінії між колонками в CSS

HTML

<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

CSS

.cols {
    column-count: 3;
    column-rule-style: dotted;
}

HTML

<h4 class="cap">1. Що обов'язкове, а що ні</h4>
<div class="cols only-width">
    <p>Тут задано лише <code>column-rule-width: 10px</code> і колір.
        Стиль лишився типовим — <code>none</code>, і лінії немає взагалі.
        Скільки не збільшуй ширину, нічого не з'явиться.</p>
</div>
<div class="cols only-style">
    <p>А тут задано лише <code>column-rule-style: solid</code>. Ширина
        лишилася типовою — <code>medium</code>, тобто 3px, і лінія намалювалася.
        Саме стиль вмикає всю трійку.</p>
</div>

<h4 class="cap">2. Значення поряд</h4>
<div class="cols v-solid"><p>solid — суцільна лінія, найчастіший вибір у тексті</p></div>
<div class="cols v-dashed"><p>dashed — штрихова, легша за суцільну</p></div>
<div class="cols v-dotted"><p>dotted — крапкова, майже непомітна у дрібному тексті</p></div>
<div class="cols v-double"><p>double — подвійна; при 1px виглядає як одинарна, двійку видно від 3px</p></div>
<div class="cols v-groove"><p>groove — об'ємна борозна, помітна лише на кольоровому тлі</p></div>

<h4 class="cap">3. Лінія місця не займає</h4>
<div class="cols narrow">
    <p>Щілина тут 4px, а лінія 10px. Лінія малюється посередині щілини й на
        розкладку не впливає — тому крапки лягли просто поверх літер. Ширину
        лінії завжди звіряйте зі щілиною.</p>
</div>

CSS

.cols {
    max-width: 560px;
    margin-bottom: 14px;
    padding: 8px 14px;
    column-count: 3;
    column-gap: 26px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font-size: .9rem;
}

.cols p {
    margin: 0;
}

.only-width {
    column-rule-width: 10px;
    column-rule-color: #d64545;
}

.only-style {
    column-rule-style: solid;
    column-rule-color: #29713a;
}

.v-solid {
    column-rule-style: solid;
    column-rule-width: 3px;
    column-rule-color: #2f6fd0;
}

.v-dashed {
    column-rule-style: dashed;
    column-rule-width: 3px;
    column-rule-color: #2f6fd0;
}

.v-dotted {
    column-rule-style: dotted;
    column-rule-width: 3px;
    column-rule-color: #2f6fd0;
}

.v-double {
    column-rule-style: double;
    column-rule-width: 5px;
    column-rule-color: #2f6fd0;
}

.v-groove {
    column-rule-style: groove;
    column-rule-width: 6px;
    column-rule-color: #d1a04a;
}

.narrow {
    column-gap: 4px;
    column-rule-style: dotted;
    column-rule-width: 10px;
    column-rule-color: #d64545;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

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

CSS

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

body {
  text-align: center;
  font-family: monospace;
  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;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('column-rule-style', this.id));

}));

HTML

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

CSS

body {
  font-family: sans-serif;
  line-height: 1.45;
}

p {
  margin-top: 0;
}

.multicol {
  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: 4px;
    -moz-column-rule-width: 4px;
         column-rule-width: 4px;
  
}

.multicol.style {
  -webkit-column-rule-style: solid;
     -moz-column-rule-style: solid;
          column-rule-style: solid;
}