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

column-rule-style

Definition

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

Examples

Specifies the rule style as a solid line:

column-rule-style: solid;

Specifies the rule style as a series of dots:

column-rule-style: dotted;

Specifies the rule style as two parallel lines:

column-rule-style: double;

Values

ValueDescription
noneNo rule is displayed.
hiddenSame as "none".
dottedSpecifies a dotted line.
dashedSpecifies a dashed line.
solidSpecifies a solid line.
doubleSpecifies two parallel lines.
grooveSpecifies a 3D groove.
ridgeSpecifies a 3D ridge.
insetSpecifies a 3D inset.
outsetSpecifies a 3D outset.
initialSpecifies the default value.
inheritSpecifies that the value should be inherited from the parent element.

Best Practices

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

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes