column-rule-style

マルチカラムの行と列の間に引かれる区切り線のスタイルを設定

記述例 :
column-rule-width: 3px; /* 列間の罫線 */
column-rule-style: dashed, solid, dotted; /* 列間の罫線を破線と実線の繰り返し */
column-rule-color: #333, #f1a; /* 列間の罫線の色 */
row-rule-width: 3px; /* 行間の罫線 */
row-rule-style: double, groove, ridge; /* 行間の罫線を破線と実線の繰り返し */
row-rule-color: #f44; /* 行間の罫線の色 */

display : gridでの表示例

display : flexでの表示例

子要素columnsでの表示例

HTML

<section class=”column-space”>
<p class=”cont”>Lorem ipsum dolor sit amet, consectetur adipiscing elit…..</p>
</section>

css（FF、safariで動くのは子要素指定の時のみで複数指定は未対応）

.column-space {
display: flex;
text-align: left;
& .cont {
columns: 4;
column-rule-width: 5px;
column-rule-style: dashed;
column-rule-color: #888;
gap: 2em;
}
}

プロパティ : column-rule-style

• dotted : 点線
• dashed : 破線
• solid : 直線
• double : 2重線
• groove : 立体線で凹状
• ridge : 立体線で凸状
• inset : 影で凹状
• outset : 影で凸状
• none : 線なし
• hidden : 非表示

「便利だなぁ」とは思ったものの、現状ではFF、safariで動くのは子要素columns:指定の時のみで、
複数指定（例：column-rule-color : #333, #f1a）、row-rule-系、column-rule-styleは
FF、safariが未対応なのでまだ実装できないのが残念 （2026.11月現在）