CSS column-rule-style Property

February 10, 2021 12:37 pm IST

You are Here:

CSS column-rule-style Property

CSS column-rule-style property sets the style of the line drawn between columns in a multi-column layout.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid #267326; padding: 10px; margin-bottom: 25px; column-count: 2; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; column-rule-width: 4px; -webkit-column-rule-width: 4px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 4px; /* Firefox */ column-rule-color: red; -webkit-column-rule-color: red; /* Chrome, Safari, Opera */ -moz-column-rule-color: red; /* Firefox */ } #point{ column-rule-style: none; -webkit-column-rule-style: none; /* Chrome, Safari, Opera */ -moz-column-rule-style: none; /* Firefox */ } #point1{ column-rule-style: hidden; -webkit-column-rule-style: hidden; /* Chrome, Safari, Opera */ -moz-column-rule-style: hidden; /* Firefox */ } </style> </head> <body> <h1>CSS column-rule-style Property</h1> <h2>column-rule-style: none;</h2> <div id="point"> Joanne Rowling was born on 31st July 1965 ... </div> <h2>column-rule-style: hidden;</h2> <div id="point1"> Joanne Rowling was born on 31st July 1965 ... </div> </body> </html>

Run

Syntax

Using CSS

element{ column-rule-style: dotted; }

Using Javascript

object.style.columnRuleStyle="dotted";

Animatable

No, column-rule-style property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS column-rule-style property is none.

Property Value

The following table provides a list of values for CSS column-rule-style property.

Value	Explanation
none hidden dotted dashed solid double groove ridge inset outset	The list of all values which can be used with CSS `column-rule-style` property.

Using JavaScript

In the following example, we will demonstrate how to change the CSS column-rule-style property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid #267326; padding: 10px; margin-bottom: 25px; column-count: 2; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; column-rule-width: 4px; -webkit-column-rule-width: 4px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 4px; /* Firefox */ column-rule-style: double; -webkit-column-rule-style: double; /* Chrome, Safari, Opera */ -moz-column-rule-style: double; /* Firefox */ } </style> </head> <body> <h1>CSS column-rule-style Property</h1> <div> Joanne Rowling was born on 31st July 1965 ... </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.columnRuleStyle = "dashed"; x.style.WebkitColumnRuleStyle = "dashed"; x.style.MozColumnRuleStyle = "dashed"; } </script> </body> </html>

Run