The DOM style columnRuleStyle Property in HTML is used to define or determine the style of rule between columns.
Syntax :
-
To set the property:
object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid| double|groove|ridge|inset|outset|initial|inherit"
-
To return the property:
object.style.columnRuleStyle"
Property Values:
| Value | Effect |
|---|---|
| none | No border is created. This is the default value. |
| hidden | Visually same as ‘none’, except it helps during border conflict resolution in table elements. |
| dotted | Dots are used as the border. |
| dashed | A dashed line is used as the border. |
| solid | A single solid line is used as the border. |
| double | Two lines are used as the border. |
| groove | A 3D grooved border is displayed. The effect depends on border-color value. |
| ridge | A 3D ridged border is displayed. The effect depends on border-color value. |
| inset | A 3D inset border is displayed. The effect depends on border-color value. |
| outset | A 3D outset border is displayed. The effect depends on border-color value. |
| initial | Sets the property to its initial value. |
| inherit | Sets the property to inherit from its parent. |
Return Value It returns a string that represents property of the element.
Example-1: Dotted creates a dotted rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
// Set dotted property.
document.getElementById(
"gfgdiv").style.columnRuleStyle = "dotted";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-2: Dashed creates a dashed rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green"
id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "dashed";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-3: Double Creates a double rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "double";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-4: Solid Creates a solid rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "solid";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-5: Groove Creates a 3D grooved rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "groove";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-6: Ridge Creates a 3D ridged rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "ridge";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-7: Inset Creates a 3D inset rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "inset";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Example-8: Outset Creates a 3D outset rule.
<!DOCTYPE html> <html>
<head>
<title>
HTML | DOM Style columnRuleStyle Property
</title>
<style>
#gfgdiv {
column-count: 4;
column-rule: 5px green;
}
</style>
</head>
<body>
<div class="container" style="color:green" id="gfgdiv">
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks geeksforgeeks
</div>
<p>To view the effect click on the button below:</p>
<button onclick="GFGFunction()">Click</button>
<script>
function GFGFunction() {
document.getElementById(
"gfgdiv").style.columnRuleStyle = "outset";
}
</script>
</body>
</html>
|
Output:
-
Before Click:
-
After Click:
Supported Browsers The browsers that support the HTML | DOM Style columnRuleStyle Property are as follows
- Google Chrome 50 and above
- Edge 12 and above
- Internet Explorer 10 and above
- Firefox 52 and above
- Opera 11.1 and above
- Apple Safari 9 and above