CSS3 column rule Property

Here is a brief description of how to specify the column width, style and color of columns in CSS3 using the shorthand property CSS3 column-rule.

Explanation

Property :

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;


Where,
column-rule-width - Sets the width of the rule between columns. Default value is medium.
column-rule-style - Sets the style of the rule between columns. Default value is none.
column-rule-color - Sets the color of the rule between columns. Default value is the color of the element.
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


column-rule-style: solid;

Definition:

The column-rule property is a shorthand property for setting all the column-rule-* properties, such as column-width, column-style and column-color of the columns.

Property :

column-rule-width

Usage:


column-rule-width: 1px;

Definition:

The column-rule-width property specifies the width of the rule between columns.

Property :

column-rule-color

Usage:


column-rule-color: green;

Definition:

The column-rule-color property specifies the color of the rule between columns.

Example :
The below example shows the above three properties:
<style>
.demodiv {
width:500px;
column-count: 3;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-width: 3px;
-webkit-column-rule-width: 3px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 3px; /* Firefox */
column-rule-color: indigo;
-webkit-column-rule-color: indigo; /* Chrome, Safari, Opera */
-moz-column-rule-color: indigo; /* Firefox */
}
</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