This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

column-rule-style

Summary

Specifies the style of the rule between columns. The column-rule-style values are the same as for border-style.

Overview table

Initial value
none
Applies to
multi-column elements
Inherited
No
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
columnRuleStyle
Percentages
N/A

Syntax

  • column-rule-style: dashed
  • column-rule-style: dotted
  • column-rule-style: double
  • column-rule-style: groove
  • column-rule-style: hidden
  • column-rule-style: inset
  • column-rule-style: none
  • column-rule-style: outset
  • column-rule-style: ridge
  • column-rule-style: solid

Values

none
Default. No column rule is drawn, regardless of any specified column-rule-width. The computed value is set to 0.
dotted
Column rule is a dotted line.
dashed
Column rule is a dashed line.
solid
Column rule is a solid line.
double
Column rule is two parallel solid lines with a space between. The sum of the two single lines and the space between equals the column-rule-width value. The column rule width must be at least 3 pixels wide to draw a double rule.
groove
3-D groove is drawn in colors slightly lighter and darker than the value.
ridge
3-D ridge is drawn in colors based on the value.
inset
3-D inset is drawn in colors based on the value.
outset
3-D outset is drawn in colors based on the value.
hidden
Same as none.

Examples

Makes 3 columns with 4px dashed green column-rule.

/*
Makes 3 columns with 4px dashed green column-rule
*/

#columns {
  columns: 3;

  /* Prefix free example below, use vendor prefixes where needed */
  column-rule-style: dashed;
  column-rule-color: green;
  column-rule-width: 5px;
}

View live example

Related specifications

CSS Multi-column Layout Module
W3C Candidate Recommendation

See also

Related articles

Multi-Column

Attributions