CSS column-rule-style Property

CSS column-rule-style property specifies the style of the column rule in a multi-column layout. For example, the column-rule can be ‘solid’, ‘dashed’, ‘dotted’, etc.

A column rule is a vertical line which separates adjacent columns in a multi-column layout. Try out the example below to see how it works:


  column-count: 3;
  column-rule-style: solid;

Use column-rule-style: dashed; to set a dashed column rule.


  column-count: 3;
  column-rule-style: dashed;

CSS Syntax

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

column-rule-style: none|solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|initial|inherit;

Property Values

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

noneThis is the default value. It specifies no rule.
solidSets a solid rule.
dashedSets a dashed rule.
dottedSets a dotted rule.
doubleSets a double rule.
grooveSets a 3D groove rule.
ridgeSets a 3D ridge rule.
insetSets a 3D inset rule.
outsetSets a 3D outset rule.
hiddenThe rule remains hidden.
initialSets the column-rule-style property to its default value(none).
inheritInherits the column-rule-style property from the parent element.

General Info

Default Valuenone
JavaScript Usageelement.style.columnRuleStyle = “dashed”


  • 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.

    View all posts

Leave a Comment