CSS Reference Property

column-rule-color 3i4br

The column-rule-color property is used to set the color of the multi-column layout. 4a4m5j

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 like those a border can have.

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 column-gap), between the columns.

Official Syntax 4j1l4a

  • Syntax:

    column-rule-color: <color>
  • Initial: currentColor
  • Applies To: multi-column elements
  • Animatable: yes, as a color

Values 4w6m73

<color>
See the <color> entry for a list of possible colors.

Examples 3y6d6i

The following will apply a blue color to rules drawn between adjacent columns in a multi-column layout:

.mag {
    columns: 12em;
    column-rule-width: 5px;
    column-rule-style: solid;
    column-rule-color: #0098D8;
}
                

See the live demo section next for a live example.

Live Demo 176n59

Have a look at the live demo:

View this demo on the Codrops Playground

Browser s162l

CSS3 Multiple column layout 1x2y3u

Method of flowing information in multiple columns

W3C Candidate Recommendation

ed from the following versions:

Desktop 1i5h4c

  • 50
  • 52
  • 10
  • 11
  • 10

Mobile / Tablet 1u2r2g

  • 10
  • 66
  • all
  • 66
  • 60

* denotes prefix required.

  • ed:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading g1037

Written by

Last updated June 11, 2020 at 10:24 pm by Mary Lou

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