マルチカラムの区切り線のスタイルを指定するには？

要素書式

column-rule-style:【区切り線の種類】;

対応ブラウザ

IE 9：×
Firefox 10.0：○（-moz-column-rule-style）
Opera 11.6：○
Chrome 16.0：○（-webkit-column-rule-style）
Safari 5.1：○（-webkit-column-rule-style）

※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。

値一覧

値

内容

区切り線の種類

区切り線の種類を指定します。
指定できる値は次の通りです。（原則的にborder-styleと同じ値が指定できます）
「none」：ボーダーは表示されません。
「hidden」：ボーダーは表示されません。幅は「0」となります。
「dotted」：点線で表示されます。
「dashed」破線で表示されます。
「solid」：単一の実線で表示されます。
「double」：2本の実線で表示されます。
「groove」：線が刻まれているように見えます。
「ridge」：線が出て来るように見えます。
「inset」：「groove」のように表示されます。
「outset」：「ridge」のように表示されます。
なお、「column-rule-style」プロパティの初期値は「none」となります。

解説文

従来、Webページで段組（マルチカラム）のレイアウトを実現するには、tableタグやfloatプロパティを使用する必要がありました。
CSS3では、段組を指定するための専用のプロパティが用意されています。

column-rule-styleプロパティは、マルチカラムの区切り線の種類を指定することができます。

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
div{
    width: 600px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    -ms-column-gap: 1em;
   column-gap: 1em;
}
#sample1{
    -moz-column-rule-style: none;
    -webkit-column-rule-style: none;
    -ms-column-rule-style: none;
    column-rule-style: none;
}
#sample2{
    -moz-column-rule-style: hidden;
    -webkit-column-rule-style: hidden;
    -ms-column-rule-style: hidden;
    column-rule-style: hidden;
}
#sample3{
    -moz-column-rule-style: dotted;
    -webkit-column-rule-style: dotted;
    -ms-column-rule-style: dotted;
    column-rule-style: dotted;
}
#sample4{
    -moz-column-rule-style: dashed;
    -webkit-column-rule-style: dashed;
    -ms-column-rule-style: dashed;
    column-rule-style: dashed;
 }
#sample5{
    -moz-column-rule-style: solid;
    -webkit-column-rule-style: solid;
    -ms-column-rule-style: solid;
    column-rule-style: solid;
 }
#sample6{
    -moz-column-rule-style: double;
    -webkit-column-rule-style: double;
    -ms-column-rule-style: double;
    column-rule-style: double;
}
#sample7{
    -moz-column-rule-style: groove;
    -webkit-column-rule-style: groove;
    -ms-column-rule-style: groove;
    column-rule-style: groove;
}
#sample8{
    -moz-column-rule-style: ridge;
    -webkit-column-rule-style: ridge;
    -ms-column-rule-style: ridge;
    column-rule-style: ridge;
}
#sample9{
    -moz-column-rule-style: inset;
    -webkit-column-rule-style: inset;
    -ms-column-rule-style: inset;
    column-rule-style: inset;
}
#sample10{
    -moz-column-rule-style: outset;
    -webkit-column-rule-style: outset;
    -ms-column-rule-style: outset;
    column-rule-style: outset;
}
</style>
</head>
<body>
<div id="sample1">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
 <div id="sample2">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample3">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample4">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample5">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample6">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample7">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample8">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample9">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
<div id="sample10">
<p>となりには２匹の猫がいます。１匹は白い耳をもつ黒猫で、もう１匹は黒い尻尾をもつ白猫です。</p>
<p>黒猫は公園のベンチで寝るのが好きですが、白猫は炊飯器の上に寝るのが好きです。 </p>
</div>
</body>
</html>

column-rule-styleの解説