Column rule property (column-rule)

The column-rule property is a shorthand property for setting all column rules there are. The property itself sets the width, style and color of the rule between columns.

Syntax:

selector {

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

}

Values:

The values that may be set for column-rule property are:

column-rule-width; Sets the width between columns. The default value is medium.
column-rule style; Sets the style of the rule between columns. The default value is none.
column-rule-color; Sets the color of the rule between columns. The default value is the basic color of the element itself.
initial, inherit

Example

The column-rule property applied to paragraphs:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; color:#444; 
    background-color:#fff;
  }
.column
 {
    column-rule: 2px outset blue;
        -webkit-column-rule: 2px outset blue; /* Chrome, Safari, Opera */
        -moz-column-rule: 2px outset blue; /* Firefox */
    column-gap: 30px;
        -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
        -moz-column-gap: 30px; /* Firefox */
    column-count: 3;
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
} 
</style>
</head>
<body>

<h3>The column-rule property:</h3>
<div class ="column">
 Content management system (CMS) is a set of software tools that allow users to create, manage and publish content such as blogs, forums and company newsletters on the internet. They can be also used internally within company intranets for workflow and collaboration. They can display published content in various familiar web layouts or templates which users can choose from. 
</div>

</body>
</html>

›› go to examples ››

Column rule property (column-rule)

Syntax:

Values:

Example

The column-rule property applied to paragraphs:

Comments

About

Contact

Get Connected