CSS column-rule-color Property


Example

Specify the color of the rule between columns:

div {
  column-rule-color: #ff0000;
}
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

Show demo ❯

Default value: The current color of the element
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.columnRuleColor="#0000ff" 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-color 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1


CSS Syntax

column-rule-color: color|initial|inherit;

Property Values

Value Description Demo
color Specifies the color of the rule. Look at CSS Color Values for a complete list of possible color values Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {
  column-count: 3;
}
Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {
  column-gap: 40px;
}
Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {
  column-rule: 4px double #ff00ff;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnRuleColor property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.