CSS column-rule-style Property

CSS column-rule-style Property


CSS column-rule-style Property
This property defines the style of the divider rule between columns in a multicolumn text flow
Syntax -
column-rule-style: dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid
 
Now we will see the values with their descriptions -
Value
Description
none
This defines no rule, and this is the default value.
hidden
This defines a hidden rule
dotted
This defines dotted rule
dashed
This defines dashed rule
solid
This defines solid rule
double
This defines double rule
groove
This specifies a 3D grooved rule. 
ridge
This specifies a 3D ridged rule.
inset
This specifies a 3D inset rule.
outset
This specifies a 3D outset rule.
 
Now we will see Example -
Example -
<!DOCTYPE html>
<html>
<head>
<style>
div {

  height: 200px;
}
.one {
  column-fill: balance;
  column-count: 3;
  column-rule: 5px;
  column-gap: 60px;
  column-rule-style: dashed;
  column-rule-color: rgb(127, 153, 255);
}
.two  {
  column-count: 3;
  column-fill: balance;
  column-gap: 60px;
  column-rule: 5px ;
  column-rule-style: double;
  column-rule-color: rgb(255, 127, 191);
}
</style>
</head>
<body>
<h1>This is a sample heading</h1>

<div class="one">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam minus soluta distinctio reiciendis, asperiores dolore dolorem labore molestias libero officia quia consectetur. Omnis id assumenda excepturi dolorem tempore totam sit aut maiores sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, vel. Animi laudantium id sit molestiae aspernatur, minima veritatis molestias reiciendis ea assumenda obcaecati sunt facilis optio vitae officiis exercitationem voluptatem quas laboriosam. Minima?
</div>
<hr>
<br>


<div class="two">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, voluptatibus perferendis? Eius modi libero placeat doloribus a dolor eveniet ratione cumque laboriosam sequi sed officiis omnis facilis minima earum temporibus atque tempora ipsum, minus est saepe hic animi! Placeat, non commodi tempora laudantium nesciunt labore minima! Quo quia placeat dolore mollitia beatae eum repellendus magnam nam totam aliquam, blanditiis assumenda vitae, tempore, delectus nesciunt ducimus tempora.
</div>

</body>
</html>

 
 
Output -