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
How to set the width of the rule between columns with JavaScript?
The columnRuleWidth property controls the thickness of the vertical line that appears between columns in a multi-column layout. This property works with CSS multi-column layouts created using column-count or column-width.
Syntax
element.style.columnRuleWidth = "value";
The value can be specified in pixels (px), ems, or keywords like thin, medium, or thick.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
column-count: 4;
column-rule: 4px solid yellow;
padding: 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<p>Click below to change width</p>
<button onclick="changeWidth()">Change Width between Columns</button>
<div id="myID">
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>
<script>
function changeWidth() {
document.getElementById("myID").style.columnRuleWidth = "8px";
alert("Column rule width changed to 8px!");
}
</script>
</body>
</html>
Different Width Values
You can set various width values for the column rule:
<!DOCTYPE html>
<html>
<head>
<style>
.column-container {
column-count: 3;
column-rule: 2px solid blue;
padding: 15px;
margin: 10px 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="container1" class="column-container">
Sample text for demonstration. Sample text for demonstration.
Sample text for demonstration. Sample text for demonstration.
</div>
<button onclick="setThin()">Thin (1px)</button>
<button onclick="setMedium()">Medium (3px)</button>
<button onclick="setThick()">Thick (5px)</button>
<script>
function setThin() {
document.getElementById("container1").style.columnRuleWidth = "thin";
}
function setMedium() {
document.getElementById("container1").style.columnRuleWidth = "medium";
}
function setThick() {
document.getElementById("container1").style.columnRuleWidth = "thick";
}
</script>
</body>
</html>
Key Points
- The
columnRuleWidthproperty only affects the width/thickness of the rule line - You must have
column-rule-styleset (or use the shorthandcolumn-rule) for the width to be visible - Common values include pixel units (1px, 2px, 5px) and keywords (thin, medium, thick)
- The property works only on elements with multi-column layout applied
Conclusion
The columnRuleWidth property provides precise control over the thickness of lines between columns. Use it with multi-column layouts to create visually appealing text divisions.
Updated on: 2026-03-15T23:18:59+05:30
149 Views
Advertisements