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
CSS3 Multi-Column rule-style Property
The CSS column-rule-style property is used to specify the style of the rule (line) that appears between columns in a multi-column layout. This property helps create visual separation between columns.
Syntax
selector {
column-rule-style: value;
}
Possible Values
| Value | Description |
|---|---|
none |
No rule (default) |
solid |
A solid line |
dashed |
A dashed line |
dotted |
A dotted line |
double |
A double line |
groove |
A 3D grooved line |
ridge |
A 3D ridged line |
inset |
A 3D inset line |
outset |
A 3D outset line |
Example
The following example demonstrates the column-rule-style property with a solid line between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.multi {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 2px;
column-rule-color: #ff6600;
text-align: justify;
padding: 20px;
}
</style>
</head>
<body>
<div class="multi">
Tutorials Point originated from the idea that there exists a class of readers who respond
better to online content and prefer to learn new skills at their own pace from the comforts
of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and
elated by the response it generated, we worked our way to adding fresh tutorials to our
repository which now proudly flaunts a wealth of tutorials and allied articles on topics
ranging from programming languages to web designing to academics and much more.
</div>
</body>
</html>
Text is displayed in three columns with solid orange vertical lines separating each column. The content flows naturally from one column to the next.
Conclusion
The column-rule-style property provides visual separation between columns in multi-column layouts. It works together with column-rule-width and column-rule-color to create attractive column dividers.
Updated on: 2026-03-15T12:06:44+05:30
80 Views
Advertisements