CSS3 multiple-column Property

How to specify multiple column property?

Explanation

Property :

column-rule

Usage:


column-rule: 1px solid green;

Definition:

The column-rule property is a shorthand property for setting all the column-rule-style,column-rule-color,column-rule-width properties.

Example :
The below example sets the width, style, and color of the rule between columns.
<style>
.demodiv {
width:500px;
width:500px;
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-rule: 3px dotted indigo;
-webkit-column-rule: 3px dotted indigo; /* Chrome, Safari, Opera */
-moz-column-rule: 3px dotted indigo; /* Firefox */
column-rule-color: indigo;
}
</style>
<div class='demodiv'>
We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users.
Free website contents that help to develop, build, promote and maintain a web site.
</div>

Result:

We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users. Free website contents that help to develop, build, promote and maintain a web site.


Ask Questions

Ask Question