This page is Ready to Use

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

column-rule-width

Summary

Specifies the width of the rule between columns.

Overview table

Initial value
medium
Applies to
multi-column elements
Inherited
No
Media
visual
Computed value
absolute length; ‘0’ if the column rule style is ‘none’ or ‘hidden’
Animatable
Yes
CSS Object Model Property
columnRuleWidth
Percentages
N/A

Syntax

  • column-rule-width: 0
  • column-rule-width: medium
  • column-rule-width: thick
  • column-rule-width: thin
  • column-rule-width: width

Values

medium
Default. A medium width border.
thin
Width less than the default.
thick
Width greater than the default.
width
Width consisting of a floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px)
0
If the column rule style is ‘none’ or ‘hidden’

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

Usage

 * Negative length values are not allowed.

Notes

The exact thickness of the column rule when using the medium, thin, or thick value is user agent dependent, and is not defined in the specification.

Related specifications

CSS Multi-column Layout Module
W3C Candidate Recommendation

See also

Related articles

Multi-Column

Attributions