Article Categories

Selected Reading

How to set the style of the rule between columns with JavaScript?

Javascript Web Development Front End Scripts

Use the columnRuleStyle property to set the style of the rule between columns in JavaScript. This property controls the visual appearance of the line that separates columns in multi-column layouts.

Syntax

element.style.columnRuleStyle = "value";

Available Values

The columnRuleStyle property accepts the following values:

none - No rule (default)
solid - A single solid line
dotted - A series of dots
dashed - A series of dashes
double - Two solid lines
groove - A 3D grooved line
ridge - A 3D ridged line
inset - A 3D inset line
outset - A 3D outset line

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myID {
        column-count: 3;
        column-rule: 4px dotted blue;
        padding: 20px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <p>Click below to change the column rule style</p>
    <button onclick="changeToDashed()">Dashed Style</button>
    <button onclick="changeToSolid()">Solid Style</button>
    <button onclick="changeToInset()">Inset Style</button>
    <button onclick="removeRule()">Remove Rule</button>
    
    <div id="myID">
      JavaScript provides powerful DOM manipulation capabilities that allow developers to create dynamic and interactive web applications. The columnRuleStyle property is particularly useful when working with multi-column layouts, as it helps visually separate content across different columns. This property works in conjunction with other column properties like column-count and column-gap to create well-structured layouts.
    </div>
    
    <script>
      function changeToDashed() {
        document.getElementById("myID").style.columnRuleStyle = "dashed";
      }
      
      function changeToSolid() {
        document.getElementById("myID").style.columnRuleStyle = "solid";
      }
      
      function changeToInset() {
        document.getElementById("myID").style.columnRuleStyle = "inset";
      }
      
      function removeRule() {
        document.getElementById("myID").style.columnRuleStyle = "none";
      }
    </script>
  </body>
</html>

Key Points

The columnRuleStyle property only affects the visual style, not the width or color
Use with columnRuleWidth and columnRuleColor for complete control
The rule appears between columns, not on the outer edges
Setting to "none" removes the rule entirely

Browser Compatibility

The columnRuleStyle property is supported in modern browsers. For older browsers, use vendor prefixes like -webkit-column-rule-style or -moz-column-rule-style.

Conclusion

The columnRuleStyle property provides an easy way to customize the appearance of column separators in multi-column layouts. Use it alongside other column properties to create visually appealing text layouts.

Fendadis John

Updated on: 2026-03-15T23:18:59+05:30

169 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next