CSS Reference Property

column-rule-style

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 groove value.
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 inset property.

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.

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

CSS3 Multiple column layout

Method of flowing information in multiple columns

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • 10
  • 11
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 11
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:29 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.