Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the style of the rule between columns with CSS
The CSS column-rule-style property is used to set the style of the rule (line) between columns in a multi-column layout. This property works in conjunction with column-count or column-width to create visual separators between columns.
Syntax
selector {
column-rule-style: value;
}
Possible Values
| Value | Description |
|---|---|
none |
No rule between columns (default) |
solid |
A solid line between columns |
dashed |
A dashed line between columns |
dotted |
A dotted line between columns |
double |
A double line between columns |
ridge |
A 3D ridged border |
groove |
A 3D grooved border |
Example: Dashed Column Rule
The following example creates a 4-column layout with dashed maroon rules between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule-color: maroon;
column-rule-style: dashed;
column-rule-width: 2px;
text-align: justify;
padding: 20px;
}
</style>
</head>
<body>
<div class="demo">
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
</div>
</body>
</html>
The text appears divided into 4 columns with dashed maroon lines separating each column. The text flows from one column to the next automatically.
Example: Different Rule Styles
The following example demonstrates various column rule styles −
<!DOCTYPE html>
<html>
<head>
<style>
.solid-rule {
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: blue;
column-rule-width: 3px;
margin-bottom: 30px;
}
.dotted-rule {
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
column-rule-color: green;
column-rule-width: 4px;
}
</style>
</head>
<body>
<div class="solid-rule">
Solid rule example. This text demonstrates a solid line between columns.
This text demonstrates a solid line between columns.
</div>
<div class="dotted-rule">
Dotted rule example. This text demonstrates dotted lines between columns.
This text demonstrates dotted lines between columns.
</div>
</body>
</html>
Two column layouts are displayed: the first with solid blue rules between columns, and the second with dotted green rules between columns.
Conclusion
The column-rule-style property provides an easy way to add visual separators between columns. It works best when combined with column-rule-color and column-rule-width for complete control over the column dividers.
Updated on: 2026-03-15T13:07:42+05:30
198 Views
Advertisements