[an error occurred while processing this directive]

段組みの罫線の幅とスタイル、色をまとめて指定する

column-rule

{ column-rule カラム・ルール : -width -style -color; }

column-ruleプロパティは、段組みの各段の間に表示する罫線のプロパティをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 なし
適用される要素 段組みされた要素
モジュール CSS Multi-column Layout Module

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できます。省略した場合は、各プロパティの初期値が適用されます。また、transparentのみを指定すると、罫線は完全な透明になります。

サンプルコード

2015年1月時点では、Firefoxでこのプロパティを適用するには接頭辞に-moz-を、Google Chrome、Safariなどでは接頭辞に-webkit-を記述します。

.section .item {
  column-count: 3;
  column-rule: 2px dotted #ccc;
}

上の例で指定したcolumn-ruleプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.section .item {
  column-count: 3;
  column-rule-width: 2px;
  column-rule-style: dotted;
  column-rule-color: #ccc;
}

関連記事