column-rule

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

Интерактивный пример

Эта краткая форма записи задаёт индивидуальные column-rule-* свойства, обычно задаваемые: column-rule-width (en-US), 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 (en-US) .

<'column-rule-color'>

Значение <color> .

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

column-rule = 
  <'column-rule-width'>  || (en-US)
  <'column-rule-style'>  || (en-US)
  <'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
CSS Multi-column Layout Module Level 1
# column-rule
Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется кмультиколоночные элементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeкак и у каждого из подсвойств этого свойства:

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

BCD tables only load in the browser