CSS3 column-rule Property


Example

Specify the width, style and color of the rule between columns:

div {
    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

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.

Default value: medium none color
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.columnRule="3px outset blue" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

CSS Syntax

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

Property Values

Value Description
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. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Examples

More Examples

Column-count

Divide the text in a <div> element into three columns:

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Try it yourself »

Column-gap

Divide the text in a <div> element into three columns, and specify a 40 pixels gap between the columns.

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

Try it yourself »

Related Pages

CSS3 tutorial: CSS3 Multiple Columns

HTML DOM reference: columnRule property




SHARE THIS PAGE

Color Picker

colorpicker