CSS3 column-rule-style Property


Example

Specify the style of the rule between columns:

div {
    -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
    -moz-column-rule-style: dotted; /* Firefox */
    column-rule-style: dotted;
}

Try it yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.columnRuleStyle="dotted" 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-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

CSS Syntax

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Default value. Defines no rule Play it »
hidden Defines a hidden rule Play it »
dotted Defines a dotted rule Play it »
dashed Defines a dashed rule Play it »
solid Defines a solid rule Play it »
double Defines a double rule Play it »
groove Specifies a 3D grooved rule. The effect depends on the width and color values Play it »
ridge Specifies a 3D ridged rule. The effect depends on the width and color values Play it »
inset Specifies a 3D inset rule. The effect depends on the width and color values Play it »
outset Specifies a 3D outset rule. The effect depends on the width and color values Play it »
initial Sets this property to its default value. Read about initial Play it »
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 »

Column-rule

Specify the width, style and color of the rule between 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;

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

Try it yourself »

Related Pages

CSS3 tutorial: CSS3 Multiple Columns

HTML DOM reference: columnRuleStyle property



SHARE THIS PAGE

COLOR PICKER

colorpicker