CSS column-rule Property

CSS column-rule property specifies the color, width, and style of a column rule in a multi-column layout. It is a shorthand of the following three properties:

A column rule is a vertical line that separates adjacent columns in a multi-column layout.

The example below sets an 8px wide, dashed, red color vertical column rule for the <div> element:

Example:

div{
  column-count: 3;
  column-rule: 8px dashed red;
}

If no color is specified, the color of the rule will be same as the text color of the element. See the example below:

Example:

div{
  column-count: 3;
  color: blue;  /* Text color */
  column-rule: 8px solid;
}

Note: A column rule does not take up any space. This means, adding a column rule has no effect on the element’s total width or height.


CSS Syntax

The column-rule property has the following syntax:

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

Property Values

The column-rule property accepts the following values:

column-rule-widthSpecifies the thickness(width) of the rule.
column-rule-styleSpecifies the style of the rule such as ‘solid’, ‘dashed’, ‘dotted’, etc.
column-rule-colorSpecifies the color of the rule.
initialSets the column-rule property to its default value.
inheritInherits the column-rule property from the parent element.

General Info

Default Valuemedium solid currentColor
InheritedNo
JavaScript Usageelement.style.columnRule = “8px solid blue”

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