CSS свойство column-rule-width

Определение и применение

CSS свойство column-rule-width определяет ширину разделительной линии между колонками.

Разделитель рисуется в промежутке между колонками и не занимает дополнительного места. Для видимой линии нужны несколько колонок, ненулевой промежуток и стиль, отличный от none и hidden. Толщина линии не увеличивает column-gap.

Попробуйте значения column-rule-width

Меняется толщина линии между колонками.

Значение свойства

column-rule-width: 1px

HTML и CSS примера
HTML
<div class="stage demo-target">
  <p>
    Колонки распределяют длинный текст по доступному пространству. Читатель
    движется сверху вниз, затем переходит к следующей колонке.
  </p>
  <h4>Заголовок</h4>
  <p>
    Размер колонок и промежутки влияют на длину строк. Разделительная линия
    рисуется в промежутке.
  </p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  height: 230px;
  overflow: auto;
  column-count: 2;
  column-gap: 20px;
  column-rule: 2px solid #245a85;
  font-size: 14px;
  column-rule-width: 1px;
}
p {
  margin: 0 0 12px;
}
h4 {
  margin: 12px 0;
}

Поддержка браузерами

Спецификация: CSS multicol

Поддерживается во всех основных браузерах с 2017 года.

Показать браузеры
Совместимостьcss.properties.column-rule-width
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
column-rule-width✓50

Версия 50 выпущена в 2016 г.

Версия 1 выпущена в 2008 г. — Префикс -webkit-

✓12

Версия 12 выпущена в 2015 г.

Версия 12 выпущена в 2015 г. — Префикс -webkit-

✓52

Версия 52 выпущена в 2017 г.

Версия 3.5 выпущена в 2009 г. — Удалено в 74; Префикс -moz-

✓11.1

Версия 11.1 выпущена в 2011 г.

Версия 15 выпущена в 2013 г. — Префикс -webkit-

✓9

Версия 9 выпущена в 2015 г.

Версия 3 выпущена в 2007 г. — Префикс -webkit-

✓50

Версия 50 выпущена в 2016 г.

Версия 18 выпущена в 2012 г. — Префикс -webkit-

✓52

Версия 52 выпущена в 2017 г.

Версия 4 выпущена в 2011 г. — Префикс -moz-

✓11.1

Версия 11.1 выпущена в 2011 г.

Версия 14 выпущена в 2013 г. — Префикс -webkit-

✓9

Версия 9 выпущена в 2015 г.

Версия 1 выпущена в 2007 г. — Префикс -webkit-

✓5.0

Версия 5.0 выпущена в 2016 г.

Версия 1.0 выпущена в 2013 г. — Префикс -webkit-

✓50

Версия 50 выпущена в 2016 г.

Версия 4.4 выпущена в 2013 г. — Префикс -webkit-

✓9

Версия 9 выпущена в 2015 г.

Версия 1 выпущена в 2007 г. — Префикс -webkit-

medium✓1✓12✓3.5✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
thick✓1✓12✓3.5✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2
thin✓1✓12✓3.5✓15✓3✓18✓4✓14✓2✓1.0✓4.4✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
column-rule-width: <line-width>;

/* Глобальные значения */
column-rule-width: initial | inherit | unset | revert | revert-layer;

JavaScript синтаксис:

JavaScript
element.style.columnRuleWidth = "10px";

Начальное значение свойства

medium.

Значения свойства

Значения column-rule-width
Значение Описание
medium
text text text text text text text text
Средняя толщина разделительной линии. Начальное значение.
thin
text text text text text text text text
Тонкая разделительная линия.
thick
text text text text text text text text
Утолщенная разделительная линия.
length Значение ширины разделительной линии указывается в единицах измерения длины CSS (px, mm, pt, и т.п.). Значение неотрицательное: 0 допустим и убирает видимую линию. Обращаю Ваше внимание, что в настоящее время значения указанные в процентах не допускаются.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства column-rule-width устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Multi-column Layout — спецификация column-rule-width.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

Примеры, попробуйте сами

Многоколоночный текст

Измените 4px на 1px, 8px или 0. Нулевая толщина убирает линию, но промежуток между колонками сохраняется.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.sample {
    font-size: 14px;
}
p {
    margin-top: 0;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Многоколоночный текст</title>
  </head>
  <body>
    <div class="sample">
      <p>Первый абзац. Колонки делят текст на вертикальные полосы и помогают сравнить ширину дорожек.</p>
      <h3 class="target">Подзаголовок</h3>
      <p>Второй абзац. Измените учебный CSS и посмотрите, как браузер перераспределит содержимое между колонками.</p>
      <p>Третий абзац. Длина текста и размеры контейнера влияют на результат раскладки.</p>
    </div>
  </body>
</html>
style.css
CSS
.sample {
    column-count: 2;
    column-rule: 2px solid #245a85;
    column-rule-width: 4px;
}