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 color of the rule between columns with CSS
The CSS column-rule-color property sets the color of the rule (line) that appears between columns in a multi-column layout. This property is used in conjunction with column-rule-style to create visible separators between columns.
Syntax
selector {
column-rule-color: color;
}
Possible Values
| Value | Description |
|---|---|
color |
Any valid CSS color value (hex, rgb, rgba, named colors, etc.) |
initial |
Sets the property to its default value |
inherit |
Inherits the color from the parent element |
Example: Orange Dashed Column Rule
The following example creates a 4-column layout with orange dashed rules between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule-color: orange;
column-rule-style: dashed;
column-rule-width: 2px;
padding: 20px;
text-align: justify;
}
</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.
This is demo text. This is demo text.
</div>
</body>
</html>
Text is displayed in 4 columns with orange dashed vertical lines separating each column. The content flows from the first column to the next when one column is filled.
Example: Blue Solid Column Rule
This example demonstrates a different color and style combination −
<!DOCTYPE html>
<html>
<head>
<style>
.blue-columns {
column-count: 3;
column-gap: 40px;
column-rule-color: #007bff;
column-rule-style: solid;
column-rule-width: 3px;
padding: 15px;
}
</style>
</head>
<body>
<div class="blue-columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</div>
</body>
</html>
Text is arranged in 3 columns with solid blue vertical lines (3px thick) between each column.
Conclusion
The column-rule-color property effectively sets the color of column separators in multi-column layouts. It must be used with column-rule-style to be visible and works best when combined with column-rule-width for complete control over column rules.
Updated on: 2026-03-15T13:03:02+05:30
210 Views
Advertisements