1. css
  2. /properties
  3. /column-rule-color



The column-rule-color CSS property sets the color of the dividing lines (rules) between columns in a multi-column layout.


Specifies the rule color as blue. This value can be any CSS color value, including keywords, hexadecimal values, RGB/RGBA values, and HSL/HSLA values:

column-rule-color: blue;

Specifies the rule color as red, using a hexadecimal value:

column-rule-color: #ff0000;

Specifies the rule color as a semi-transparent green, using an HSLA value:

column-rule-color: hsla(120, 100%, 50%, 0.5);


colorSpecifies the color of the column rule. Any valid CSS color value can be used.

Best Practices

  • Choose a column-rule-color that enhances the readability of the content and fits the overall design of the layout.
  • Consider using media queries to adjust the column-rule-color based on the screen size.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera