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 column-rule Property
The CSS3 column-rule property is used to add a dividing line between columns in multi-column layouts. It acts as a shorthand for setting the width, style, and color of the rule that appears between columns.
Syntax
selector {
column-rule: width style color;
}
The column-rule property is a shorthand for:
-
column-rule-width− Sets the width of the rule -
column-rule-style− Sets the style of the rule (solid, dashed, dotted, etc.) -
column-rule-color− Sets the color of the rule
Example: Basic Column Rule
The following example creates a 4-column layout with a magenta rule between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.multi {
column-count: 4;
column-gap: 40px;
column-rule: 4px solid #ff00ff;
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 arranged in 4 columns with a 4px solid magenta line appearing between each column. The columns have 40px gaps with the rule centered in each gap.
Example: Different Rule Styles
You can use different styles for the column rule −
<!DOCTYPE html>
<html>
<head>
<style>
.dashed-rule {
column-count: 3;
column-gap: 30px;
column-rule: 2px dashed #007acc;
margin-bottom: 20px;
padding: 15px;
text-align: justify;
}
.dotted-rule {
column-count: 3;
column-gap: 30px;
column-rule: 3px dotted #ff6600;
padding: 15px;
text-align: justify;
}
</style>
</head>
<body>
<div class="dashed-rule">
This text demonstrates a dashed column rule. The content flows across three columns
with dashed blue lines separating each column.
</div>
<div class="dotted-rule">
This text demonstrates a dotted column rule. The content flows across three columns
with dotted orange lines separating each column.
</div>
</body>
</html>
Two text blocks appear: the first with 3 columns separated by 2px dashed blue lines, and the second with 3 columns separated by 3px dotted orange lines.
Conclusion
The column-rule property enhances multi-column layouts by adding visual separators between columns. It's essential for improving readability when content is divided into multiple columns.
Updated on: 2026-03-15T12:08:55+05:30
67 Views
Advertisements