CSS3 `column-rule-style` Property

Example

Specify the style rule between columns:

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

Browser Support

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

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
column-rule-style	50.0 <br>4.0 -webkit-	10.0	2.0 -moz-	9.0 <br>3.1 -webkit-	37.0 <br>15.0 -webkit <br>11.1

Property Definition and Usage

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

Default value:	none
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	`object.style.columnRuleStyle="dotted"`
---	---

Syntax

Value	Description
none	Defines no rule.
hidden	Defines a hidden rule.
dotted	Defines a dotted rule.
dashed	Defines a dashed rule.
solid	Defines a solid rule.
double	Defines a double rule.
groove	Defines a 3D grooved rule. The effect depends on the width and color values.
ridge	Defines a 3D ridged rule. The effect depends on the width and color values.
inset	Defines a 3D inset rule. The effect depends on the width and color values.
outset	Defines a 3D outset rule. The effect depends on the width and color values.

More Examples

Column-count

Column-gap

Column-rule

CSS3 Tutorial: CSS3 Multiple Columns

❮ Sel Link Css3 Pr Border Image Source ❯