Column Rule property is used to add the vertical line after the Column. Using this you can add the vertical line after the column. In this you can add the different style of the line like that solid, dashed, dotted, double, inset, outset, groove, ridge, none, hidden.
Syntax:
.clom{
-webkit-column-rule: 1px solid #dddddd;
-moz-column-rule:1px solid #dddddd;
Column-rule:1px solid #dddddd;
}Example Code:CSS:
.clum {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule:2px solid red;
-moz-column-rule:2px solid red;
column-rule:2px solid red;
}HTML:
<div class="clum"> <p>Column Count used to give the value for number column will present in the page</p> <p>Column Count used to give the value for number column will present in the page</p> <p>Column Count used to give the value for number column will present in the page</p> </div>
Preview:
Column Count used to give the value for number column will present in the page
Column Count used to give the value for number column will present in the page
Column Count used to give the value for number column will present in the page
| Feature | Chrome | Firefox | IE | Opera | Safari | Android | IOS |
|---|---|---|---|---|---|---|---|
| Basic support | Any Version | 1.5+ | 10+ | 11.1+ | 3+ | 2.3+ | 6.1+ |
