column-rule

Краткая форма записи CSS свойств column-rule устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной верстке.

Эта краткая форма записи задает индивидуальные  column-rule-* свойства, обычно задаваемые: column-rule-width, column-rule-style, и column-rule-color.

Примечание: Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).

Синтаксис

column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/* глобальные значения */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

Свойство column-rule указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.

Значения

<'column-rule-width'>
<length> или одно из трех ключевых свойств, thin, medium, или thick. См. подробно -  border-width.
<'column-rule-style'>
См. подробно border-style .
<'column-rule-color'>
Значение <color> .

Формальный синтаксис

<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Примеры

Example 1

/* Аналогично "medium dotted currentColor" */
p.foo { column-rule: dotted; }

/* Аналогично "medium solid blue" */
p.bar { column-rule: solid blue; }

/* Аналогично "8px solid currentColor" */
p.baz { column-rule: solid 8px; }

p.abc { column-rule: thick inset blue; }

Example 2

HTML

<p class="content-box">
  This is a bunch of text split into three columns.
  Take note of how the `column-rule` property is used
  to adjust the style, width, and color of the rule
  that appears between the columns.
</p>

CSS

.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}

Результат

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

Specification Status Comment
CSS Multi-column Layout Module
Определение 'column-rule' в этой спецификации.
Рабочий черновик Первое определение.
Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется кмультиколоночные элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeкак и у каждого из подсвойств этого свойства:
Канонический порядокper grammar

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
column-ruleChrome Полная поддержка 50
Полная поддержка 50
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 52
Полная поддержка 52
Полная поддержка 3.5
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE Полная поддержка 10Opera Полная поддержка 11.1
Полная поддержка 11.1
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 50
Полная поддержка 50
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 50
Полная поддержка 50
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 52
Полная поддержка 52
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 11.1
Полная поддержка 11.1
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
Полная поддержка 5.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.