column-rule

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

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

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

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

Синтаксис

css

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

css

/* Аналогично "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

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

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