CSS column-rule Property

February 10, 2021 12:37 pm IST

You are Here:

CSS column-rule Property

CSS column-rule property sets the width, style, and color of the line drawn between columns in a multi-column layout. It is a shorthand property of the following CSS properties

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: 4px double #ff00ff; -webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */ -moz-column-rule: 4px double #ff00ff; /* Firefox */ } </style> </head> <body> <h1>CSS column-rule Property</h1> <div> Joanne Rowling was born on 31st July 1965 at Yate General Hospital near Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales. </div> </body> </html>

Run

Syntax

Using CSS

element{ //column-rule: column-rule-width column-rule-style column-rule-color; column-rule: 4px solid red; }

Using Javascript

object.style.column-rule="4px solid red";

Animatable

Yes, column-rule property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS column-rule property is medium none color.

Property Value

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

Value	Explanation
column-rule-width	Specifies the width of the rule between columns.
column-rule-style	Specifies the style of the rule between columns.
column-rule-color	Specifies the color of the rule between columns.

Using JavaScript

In the following example, we will demonstrate how to change the CSS column-rule 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; } </style> </head> <body> <h1>CSS column-rule Property</h1> <div> Joanne Rowling was born on 31st July 1965 at Yate General Hospital near Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.columnRule = "4px double #ff00ff"; x.style.WebkitColumnRule = "4px double #ff00ff"; x.style.MozColumnRule = "4px double #ff00ff"; } </script> </body> </html>

Run