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
Shorthand property for setting all the column-rule-* properties
The CSS column-rule property is a shorthand property for setting all the column rule properties in one declaration. It allows you to define the width, style, and color of the line that appears between columns in a multi-column layout.
Syntax
selector {
column-rule: width style color;
}
Possible Values
| Property | Values | Description |
|---|---|---|
column-rule-width |
thin, medium, thick, length | Sets the width of the column rule |
column-rule-style |
none, solid, dashed, dotted, double, etc. | Sets the style of the column rule |
column-rule-color |
color name, hex, rgb, rgba | Sets the color of the column rule |
Example
The following example demonstrates how to use the column-rule property to add a dotted orange line between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule: 2px dotted orange;
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>
Text is displayed in 4 columns with dotted orange vertical lines (2px width) separating each column. The columns have 50px gaps between them.
Conclusion
The column-rule shorthand property provides an efficient way to style column dividers in multi-column layouts. It combines width, style, and color properties into a single declaration for cleaner CSS code.
Updated on: 2026-03-15T13:02:46+05:30
161 Views
Advertisements