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



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


Specifies a 1-pixel solid red line as the column rule:

column-rule: 1px solid red;

Specifies a 2-millimeter dotted black line as the column rule:

column-rule: 2mm dotted black;

Specifies a 3-point double green line as the column rule:

column-rule: 3pt double green;


<width>Specifies the width of the rule using a length unit (e.g. px, pt, mm, em, etc.).
<style>Specifies the style of the rule (e.g. solid, dotted, double, etc.).
<color>Specifies the color of the rule.
initialSpecifies the default value.
inheritSpecifies that the value should be inherited from the parent element.

Best Practices

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

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera