• 1
  • 2
Home > Tips

CSS3 Mulitiple Columns Tutorial: column-rule




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



 column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>


Values explanation:

1. Column-rule-width: its used to define the width of column-rule and the default value is medium, which cannot be negative.

2. Column-rule-style: its used to define the style of column-rule, the defaut value is none. If it is default, the value of column is 0.

3. Column-rule-color: its used to define the color of column-rule, the default value is the value of foreground color. If you dont need this color, you can set it as transparent.


Supported browser


Same as other property of multiple columns, we need to add its prefix in webkit and Gecko.

 /*Webkit: Safari and Chrome*/
  -webkit-column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>
  /*Gecko: Firefox*/
  -moz-column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>
  /*W3C standard*/
  column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color> /*Opera11.0+*/


Now lets see the example below:

 .columnRule {
     -moz-column-width: 190px;
     -webkit-column-width: 190px;
     column-width: 190px;
     -webkit-column-count: 2;
     -moz-column-count: 2;
     column-count: 2;
     -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
     column-gap: 20px;
     -moz-column-rule: 5px solid red;
     -webkit-column-rule: 5px solid red;
     column-rule: 5px solid red;


The effect:



Its quite an easy example, huh? Then lets change the value of column-rule width, color and background:

 .columnRule {
     background: none repeat scroll 0 0 orange;
     color: blue;
     -moz-column-rule: 150px solid red;
     -webkit-column-rule: 150px solid red;
     column-rule: 150px solid red;


The effect as follow:



There are some messages this example has told us:
1. The increase of the value of column-rule-width cannot affect the layout but expand itself to both sides until the border of the element.
2. The column-rule in z-axis is between background and content, we the make some special effects by using the advantage.



 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.