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 width of the rule between columns with CSS
The CSS column-rule-width property is used to set the width of the rule (line) between columns in a multi-column layout. This property works in conjunction with column-rule-style and column-rule-color to create visual separators between columns.
Syntax
selector {
column-rule-width: value;
}
Possible Values
| Value | Description |
|---|---|
thin |
A thin rule (typically 1px) |
medium |
A medium rule (typically 3px) - default value |
thick |
A thick rule (typically 5px) |
length |
A specific width in px, em, rem, etc. |
Example: Setting Column Rule Width
The following example demonstrates how to set different widths for column rules −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 3;
column-gap: 40px;
column-rule-color: #4CAF50;
column-rule-style: solid;
column-rule-width: 5px;
padding: 20px;
text-align: justify;
line-height: 1.6;
}
.thick-rule {
column-rule-width: thick;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="demo">
This is sample text to demonstrate column rule width. The text flows across multiple columns with a 5px wide green rule separating each column. This creates a clear visual distinction between columns while maintaining readability. You can adjust the width to make the separator more or less prominent based on your design needs.
</div>
<div class="demo thick-rule">
This example uses the 'thick' keyword value instead of a specific pixel width. The browser determines the actual thickness, which is typically around 5px. This approach provides consistent results across different devices and browsers.
</div>
</body>
</html>
Two multi-column text blocks appear. The first has 5px wide green solid lines separating three columns. The second uses thick green rules between columns. Both demonstrate clear visual separation between text columns.
Conclusion
The column-rule-width property provides precise control over column separator thickness. Use specific length values for exact control or keywords like thin, medium, or thick for consistent, browser-determined widths.
Updated on: 2026-03-15T13:07:57+05:30
144 Views
Advertisements