column-rule property CSS Reference

Definition and Usage

In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

• Initial the concatenation of the initial values of its longhand properties:
  • column-rule-width: medium
  • column-rule-style: none
  • column-rule-color: currentColor
• Applies to multicol elements
• Inherited no
• Media visual
• Computed Value as each of the properties of the shorthand:
  • column-rule-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
  • column-rule-style: as specified
  • column-rule-width: an absolute length; 0 if the column rule style is none or hidden
• Animatable as each of the properties of the shorthand:
  • column-rule-color: yes, as a color
  • column-rule-style: no
  • column-rule-width: yes, as a length
• Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Values

<'column-rule-width'>

Is a <length> or one of the three keywords, thin, medium or thick. See border-width for details.

<'column-rule-style'>

See border-style for possible values and details.

<'column-rule-color'>

Is a <color> value.

Examples

p.foo { column-rule: dotted; }          /* same as "medium dotted currentColor" */
p.bar { column-rule: solid blue; }      /* same as "medium solid blue" */
p.baz { column-rule: solid 8px; }       /* same as "8px solid currentColor" */
p.abc { column-rule: thick inset blue; }

Live Example

Compatibility

Desktop browsers

Mobile browsers