CSS column-rule-color Property
The column-rule-color property sets the color of the rule.
The column-rule-color property is one of the CSS3 properties.
The color of the rule can also be specified by the column-rule shorthand property.
You can find web colors in our HTML colors section and try to choose your preferred colors with our Color Picker tool.
| Initial Value | currentColor |
| Applies to | Multicol elements. |
| Inherited | No. |
| Animatable | Yes. The color of the rule is animated. |
| Version | CSS3 |
| DOM Syntax | object.style.columnRuleColor = "#666"; |
Syntax¶
column-rule-color: color | initial | inherit;Example of the column-rule-color property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule-style: dashed;
-webkit-column-rule-color: lightgreen;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule-style: dashed;
-moz-column-rule-color: lightgreen;
column-count: 3;
column-gap: 20px;
column-rule-style: dashed;
column-rule-color: lightgreen;
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>You can set hexadecimal, RGB, RGBA, HSL, HSLA, or color names as a value for the column-rule-color property.
Example of the column-rule-color property with the "hexadecimal" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: #8ebf42;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: solid;
-moz-column-rule-color: #8ebf42;
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-color: #8ebf42;
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Example of the column-rule-color property with the "RGB" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-style: double;
-webkit-column-rule-color: rgb(234, 211, 21);
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: double;
-moz-column-rule-color: rgb(234, 211, 21);
column-count: 3;
column-gap: 40px;
column-rule-style: double;
column-rule-color: rgb(234, 211, 21);
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Example of the column-rule-color property with the "HSL" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: hsl(351, 97%, 57%);
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: solid;
-moz-column-rule-color: hsl(351, 97%, 57%);
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: hsl(351, 97%, 57%);
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| color | Sets the color of the rule. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. | |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji