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 column rule properties with JavaScript?
The columnRule property in JavaScript allows you to set visual separators between multi-column layouts. It controls the style, width, and color of lines that appear between columns.
Syntax
element.style.columnRule = "width style color";
Parameters
- width - Thickness of the rule (e.g., "2px", "thin", "medium")
- style - Line style (solid, dashed, dotted, outset, inset, etc.)
- color - Rule color (any valid CSS color)
Example
Click the button to create columns with a visual separator between them:
<!DOCTYPE html>
<html>
<body>
<p>Click below to create 4 columns with a rule separator</p>
<button onclick="display()">Create Columns</button>
<div id="myID" style="padding: 20px;">
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 display() {
const element = document.getElementById("myID");
element.style.columnCount = "4";
element.style.columnRule = "2px solid red";
}
</script>
</body>
</html>
Different Rule Styles
You can experiment with various column rule styles:
<!DOCTYPE html>
<html>
<body>
<div id="example1" style="padding: 20px; margin: 10px;">
Sample text for demonstrating different column rule styles.
Sample text for demonstrating different column rule styles.
Sample text for demonstrating different column rule styles.
</div>
<button onclick="setSolidRule()">Solid Rule</button>
<button onclick="setDashedRule()">Dashed Rule</button>
<button onclick="setDottedRule()">Dotted Rule</button>
<script>
function setSolidRule() {
const element = document.getElementById("example1");
element.style.columnCount = "3";
element.style.columnRule = "3px solid blue";
}
function setDashedRule() {
const element = document.getElementById("example1");
element.style.columnCount = "3";
element.style.columnRule = "2px dashed green";
}
function setDottedRule() {
const element = document.getElementById("example1");
element.style.columnCount = "3";
element.style.columnRule = "4px dotted purple";
}
</script>
</body>
</html>
Individual Properties
You can also set column rule properties individually:
<script>
function setIndividualProperties() {
const element = document.getElementById("myColumn");
element.style.columnCount = "2";
element.style.columnRuleWidth = "3px";
element.style.columnRuleStyle = "double";
element.style.columnRuleColor = "orange";
}
</script>
Common Rule Styles
| Style | Description | Example |
|---|---|---|
| solid | Single solid line | "2px solid black" |
| dashed | Dashed line | "1px dashed gray" |
| dotted | Dotted line | "3px dotted blue" |
| double | Double line | "4px double red" |
Conclusion
The columnRule property provides an easy way to add visual separators between columns in multi-column layouts. Combine it with columnCount to create well-structured, readable content layouts.
Updated on: 2026-03-15T23:18:59+05:30
245 Views
Advertisements