CSS column-rule-width Property

CSS column-rule-width property sets the thickness of the column rule in a multi-column layout. A column rule is a vertical line that separates adjacent columns in a multi-column layout.

It can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, etc. It also accepts keywords like ‘thin’, ‘thick’, ‘medium’, etc. Try out the example below to see how it works:

Example:

div{
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 8px;
}

Set a thin column rule using the keyword ‘thin’.

Example:

div{
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thin;
}

CSS Syntax

The column-rule-width property has the following syntax:

column-rule-width: length|thin|medium|thick|initial|inherit;

Property Values

The column-rule-width property accepts the following values:

lengthSets the width of the rule in CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
thinSets a thin rule.
mediumSets a medium rule. This is the default value.
thick Sets a thick rule.
initialSets the column-rule-width property to its default value(medium).
inheritInherits the column-rule-width property from the parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.style.columnRuleWidth = “8px”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment