The column-rule-style
property in CSS specifies the rule style between different columns when we are using a multi-column layout.
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
none
: It is the default value. It specifies that there is no rule.
hidden
: It is the same as none.
dashed
: It specifies that the rule is dashed.
dotted
: It specifies that the rule is dotted.
double
: It specifies that the rule is double.
solid
: It specifies that the rule is solid.
groove
: It specifies a 3D grooved rule.
ridge
: It specifies a 3D ridged rule.
inset
: It specifies a 3D inset rule.
outset
: It specifies a 3D outset rule.
initial
: This sets the value to its default value.
inherit
: This inherits property from its parent value.
The following is the basic HTML & CSS code to demonstrate the use of the column-rule-style property:
In this example, we have set the column-rule-style
property. We can see that a blue dashed line separates the column, and the size of one dash is set to be 5px
.
We can also change the style, color, and width according to our own choice.