The column-rule-style property sets the style of the rule between columns of an element.

  • Initial valuenone
  • Applies toMulti-column elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.columnRuleStyle
Formal syntax: <border-style>

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
  • <border-style>Is a keyword defined by border-style describing the style of the rule. The styling must be interpreted as in the collapsing border model. Values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
body {
   column-gap: 1em;
   column-rule-width: thin; 
   column-rule-style: solid;
   column-rule-color: black; 
}
noFirefoxnoExplorernoChromenoSafari11.1+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.