Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

概要

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

初期値以下の各プロパティのショートハンドとして補完します:
適用対象多段要素
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
  • column-rule-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
  • column-rule-style: 指定値
  • column-rule-width: 絶対的な長さ。列の罫線のスタイルが nonehidden なら 0
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序order of appearance in the formal grammar of the values

構文

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; }

実際の描画

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

仕様

仕様書 策定状況 コメント
CSS Multi-column Layout Module
column-rule の定義
勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有)-webkit 3.5 (1.9.1)-moz 10 11.1 3.0 (522)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有) ? ? ?

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, Prinz_Rana, fscholz, ethertank, sosleepy, Marsf
 最終更新者: Sebastianz,