CSS column-rule-color Property
Description
The column-rule-color
is a CSS property that is used to define the color of the rule line that separates columns in a multi-column layout. This property allows web designers to specify the color of the vertical line that appears between adjacent columns when using the CSS columns property. By setting the column-rule-color, designers can customize the visual appearance of column divisions to better suit the overall design and aesthetics of their web content. It accepts various color values, such as named colors, hexadecimal codes, RGB values, or HSL values, providing flexibility in achieving the desired visual effect.
- Initial value
- currentColor
- Applies to
- Multi-column elements
- Inherited
- No
- Computed value
- The same as the computed value for the 'color' property
- Animatable
- No
- JavaScript syntax
- object.style.columnRuleColor
Interactive Demo
Syntax
column-rule-color: <color>
Values
- <color>Is a <color> value representing the color of the rule separating columns.
Example
<div class="book">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
.book {
columns: 3 200px;
-webkit-columns: 3 200px;
-moz-columns: 3 200px;
column-rule-color: red;
-webkit-column-rule-color: red;
-moz-column-rule-color: red;
column-rule-style: dashed;
-webkit-column-style: dashed;
-moz-column-rule-style: dashed;
column-rule-width: 2px;
-webkit-column-rule-width: 2px;
-moz-column-rule-width: 2px;
}
Browser Support
The following table will show you the current browser support for the CSS column-rule-color
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 50 | 52 | 11.1 | 9 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
50 | 52 | 11.1 | 9 | 5 | 50 |
Last updated by CSSPortal on: 1st January 2024