The column-rule-style property is used to set the style of the column rule between adjacent columns in a multi-column layout.
A column rule is kind of like a border that you can add to separate adjacent columns in the same multi-column layout. It can even have styles just like those a border can have, and the column-rule-style property is used to specify a style to use.
A column rule is drawn only between adjacent columns; that is, it is not drawn before the first column, nor is it drawn after the last column.
A column rule does not take up any space. This means that adding a column rule will not increase the amount of space, or the gap (see column-gap), between the columns.
Official Syntax
-
Syntax:
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
- Initial: none
- Applies To: multi-column elements
- Animatable: no
Values
- none
- Displays no column rule. Color and width set on the column rule will be ignored.
- hidden
-
Similar to
none, it displays no column rule. Color and width set on the column rule will be ignored. - dotted
- Displays a column rule as a set of rounded dots. The radius of the dots is equal to half of the width of the column rule.
- dashed
- Displays a column rule as a series of square-ended dashes.
- solid
- Displays a column rule as a solid straight line.
- double
- Displays the column rule as two parallel solid lines with some space between them. The thickness of the lines is not specified, but the sum of the lines and the space must equal to the value of the column-rule-width property’s value.
- groove
- The displayed column rule looks as if it were carved in the canvas. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the color specified using the column-rule-color property.
- ridge
-
The column rule looks as if it were coming out of the canvas in a 3D effect. It is the opposite of the effect achieved by the
groovevalue. - inset
-
Displays a column rule that makes the element look as if it is “sunken” or embedded into the page.
- outset
-
Displays a column-rule that makes the element look as if it is embossed with a 3D effect. It has the opposite of the effect achieved by the
insetproperty.
Examples
The following will draw blue-colored dotted rules between adjacent columns in a multi-column layout:
.mag {
columns: 12em;
column-rule-width: 3px;
column-rule-color: #0099CC;
column-rule-style: dotted;
}
See the live demo section next for a live example.
Browser Support
CSS3 Multiple column layout
Method of flowing information in multiple columns
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 50
- 92
- 10
- 37
- 10
Mobile / Tablet
- 10
- 131
- all
- 131
- 132
