HTML | DOM Style columnRuleWidth Property

The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns.

Syntax:

• It returns the columnRuleWidth property.

object.style.columnRuleWidth

• It is used to set columnRuleWidth property.

object.style.columnRuleWidth = "medium|thin|thick|length|
initial|inherit"

Property Values:

• thin: It is used to set a thin rule between the columns.
• medium: It is used to create a medium width rule between the columns. It is the default width.
• thick: It creates a thick width rule between the columns.
• length: It is used to set the width by length. It does not takes negative value.
• initial: It is used to set columnRuleWidth property to its default value.
• inherit: This property is inherited from its parent.

Return Value: It returns a string that represents the column-rule-width property of the element. 

Example 1: This example describes the length property value. 

Output: 

Before Click on the button: 

After Click on the button: 

Example 2: This example describes medium property value. 

Output: 

Before Click on the button: 

After Click on the button: 

Supported Browsers: The browser supported by DOM Style columnRuleStyle property are listed below:

• Google Chrome 50 and above
• Edge 12 and above
• Firefox 52 and above
• Internet Explorer 10 and above
• Opera 11.1 and above
• Apple Safari 9 and above