css властивість column-rule

Властивість column-rule в багатоколонкові тексті малює лінію між колонками і визначає її параметри.

Властивість column-rule є узагальненою для установки всіх влативостей типу column-rule-:

• column-rule-width
• column-rule-style
• column-rule-color

У багатоколонковому тексті задає колір, ширину та стиль ліній між колонками.

правити

+ додати пораду чи нотатку

Синтаксис

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

Властивість column-rule може отримувати 5 значень:

column-rule-width

Встановлює ширину лінії між колонками. Значення без задання середу medium

автор: Svitlana

правити

column-rule-style

Встановлює стиль лінії між колонами. Значення без задання none

автор: Svitlana

правити

column-rule-color

Встановлює колір лінії між колонами. Значення без задання співпадає з кольором елемента.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
column-rule	1.0 -webkit-	1.5 -moz-	3.0 -webkit-	11.1	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
column-rule	1.0 -webkit-	1.0 -moz-	3.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

.cols {
    column-count: 3;
    column-rule: 4px outset #ff00ff;
}