column-rule

概要

多段レイアウトにおいてcolumn-rule CSS プロパティは、各段 (コラム) の間に描画される直線または "罫線" を指定します。column-rule を使用すれば、個々の column-rule-* プロパティで分けて設定しなくても、これ一つで足ります:
column-rule-width, column-rule-style および column-rule-color

構文

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

値

任意の順番で 1 個～ 3 個の値を受け取ります:

<column-rule-width>

任意。次のキーワードのいずれか一つになります: <length> | thin | medium | thick
指定しない場合は、デフォルト値の medium が使用されます。詳しくは、border-width を参照してください。

<column-rule-style>

必須。指定しない場合は、デフォルト値の none が使用されます。指定可能な値と詳細については border-style を参照してください。

<column-rule-color>

任意。<color> の値参照。指定しない場合は、デフォルト値が使用されます: currentcolor、要素の color プロパティの値 (前面のカラー)。

例

p.foo { column-rule: dotted; }          /* "medium dotted currentColor" と同じ */
p.bar { column-rule: solid blue; }      /* "medium solid blue" と同じ */
p.baz { column-rule: solid 8px; }       /* "8px solid currentColor" と同じ */
p.abc { column-rule: thick inset blue; }

実際の描画

仕様

ブラウザ実装状況