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-width Property
The CSS column-rule-width property is used to specify the width of the rule (line) that appears 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: Using column-rule-width Property
The following example demonstrates the column-rule-width property with a 5px wide magenta rule between columns −
<!DOCTYPE html>
<html>
<head>
<style>
.multi {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-color: #ff00ff;
column-rule-width: 5px;
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 displayed in three columns with 5px wide magenta vertical lines separating each column. The content flows from one column to the next with clear visual separation.
Example: Comparing Different Rule Widths
This example shows different rule widths using keyword values −
<!DOCTYPE html>
<html>
<head>
<style>
.thin-rule {
column-count: 2;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: #333;
column-rule-width: thin;
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
}
.thick-rule {
column-count: 2;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: #333;
column-rule-width: thick;
padding: 15px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="thin-rule">
This example uses a thin rule width. The separator between columns is barely visible.
</div>
<div class="thick-rule">
This example uses a thick rule width. The separator between columns is much more prominent.
</div>
</body>
</html>
Two text blocks are displayed: the first with a thin column rule separator, and the second with a thick column rule separator, clearly showing the difference in visual prominence.
Conclusion
The column-rule-width property controls the thickness of the line between columns in multi-column layouts. Use specific pixel values for precise control or keyword values like thin, medium, or thick for standard widths.
Updated on: 2026-03-15T12:06:32+05:30
178 Views
Advertisements