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-color Property
The CSS3 column-rule-color property is used to specify the color of the vertical line (rule) that appears between columns in a multi-column layout. This property works in conjunction with column-rule-style and column-rule-width to create visible separators between columns.
Syntax
selector {
column-rule-color: color-value;
}
Possible Values
| Value | Description |
|---|---|
color-name |
Standard color names like red, blue, green |
hex-value |
Hexadecimal color codes like #ff0000, #00ff00 |
rgb() |
RGB color values like rgb(255, 0, 0) |
rgba() |
RGB with alpha transparency like rgba(255, 0, 0, 0.5) |
initial |
Sets the property to its default value |
inherit |
Inherits the value from parent element |
Example
The following example demonstrates how to create a multi-column layout with colored rules between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-column {
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-width: 2px;
column-rule-color: #ff6600;
padding: 20px;
text-align: justify;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="multi-column">
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>
The text is displayed in three columns with orange vertical lines (2px solid #ff6600) separating each column. The content flows from the first column to the second, then to the third column.
Example with Different Colors
You can experiment with different color values for the column rules −
<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
column-count: 2;
column-gap: 40px;
column-rule: 3px solid red;
margin-bottom: 20px;
}
.example2 {
column-count: 2;
column-gap: 40px;
column-rule: 2px dashed #0066cc;
margin-bottom: 20px;
}
.example3 {
column-count: 2;
column-gap: 40px;
column-rule: 4px dotted rgba(0, 128, 0, 0.7);
}
</style>
</head>
<body>
<div class="example1">
This example uses a red solid rule between columns.
The column-rule-color property is set to red.
</div>
<div class="example2">
This example uses a blue dashed rule with hex color #0066cc.
The rule appears as a dashed line between the two columns.
</div>
<div class="example3">
This example uses a semi-transparent green dotted rule.
The rgba() function provides transparency control.
</div>
</body>
</html>
Three different multi-column layouts are displayed: 1. Text in two columns with a red solid vertical line 2. Text in two columns with a blue dashed vertical line 3. Text in two columns with a semi-transparent green dotted vertical line
Conclusion
The column-rule-color property provides an easy way to add visual separation between columns in multi-column layouts. Combined with column-rule-style and column-rule-width, it helps create professional-looking column designs for better content readability.
Updated on: 2026-03-15T12:09:29+05:30
168 Views
Advertisements