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

CSS-свойство column-rule-style устанавливает стиль пространства между столбцами в многостолбцовой компоновке.

Значение по умолчанию:	`none`
Применяется к:	Multi-column элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit

Примеры написания кода свойства column-rule-style:

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule-color: red;
    -webkit-column-rule-width: 2px;
    -webkit-column-rule-style: solid;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule-color: red;
    -moz-column-rule-width: 2px;
    -moz-column-rule-style: solid;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule-color: red;
    column-rule-width: 2px;
    column-rule-style: solid;
}

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

В следующей таблице описаны значения этого свойства.

Значение	Описание
`none`	Отменяет работу свойства.
`hidden`	Не отображает ничего. По сути как `none`.
`dotted`	Разделяет колонки серией точек.
`dashed`	Разделяет колонки небольшими штрихами.
`solid`	Разделяет колонки одной сплошной линией.
`double`	Разделяет колонки двумя параллельными сплошными линиями с небольшим пробелом между ними. Ширина двух строк и расстояние между определяется значением `column-rule-width`.
`groove`	Пространство между колонками визуально отображается будто оно «вырезано» на странице. Это создает впечатление 3D изображения, которое обычно достигается путем создания тени из двух цветов, которые немного светлее и темнее, чем `column-rule-color`.
`ridge`	Отображает свойство с обратным эффектом `groove`. Это также создает впечатление 3D изображения, правило выглядит так, как будто оно выходит из страницы.
`inset`	Отображает свойство так же, как `ridge`.
`outset`	Отображает свойство так же, как `groove`.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `column-rule-style`.

Свойство column-rule-style в основном принимает значения, определенные для border-style, но значения интерпретируются как collapse. Подробнее об этой модели в Руководстве по CSS Tables.