CSS column-rule Property

CSS column-rule Property

This shorthand property defines the style, width, and color of the rule divider between columns in a multicolumn text flow.

Syntax -

column-rule: rule-width rule-style color

where rule-width is a valid measurement or keyword as defined by column-rule-width, rule-style is a valid style as defined by column-rule-style, and color is a CSS color value also settable with column-rule-color.

Now we will see Example -

Example -

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
height: 200px;
}
.one {
column-fill: balance;
column-gap: 60px;
column-rule: 5px solid rgb(226, 149, 7);
}
.two {
column-fill: balance;
column-gap: 60px;
column-rule: 5px solid rgb(179, 200, 245);
}
</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 -