column-rule-color
Quick Summary for column-rule-color
The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.
Code Usage for column-rule-color
/* <color> values */ column-rule-color: red; column-rule-color: rgb(192, 56, 78); column-rule-color: transparent; column-rule-color: hsla(0, 100%, 50%, 0.6);  /* Global values */ column-rule-color: inherit; column-rule-color: initial; column-rule-color: revert; column-rule-color: unset; 
More Details for column-rule-color

column-rule-color

The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.

Syntax

/* <color> values */ column-rule-color: red; column-rule-color: rgb(192, 56, 78); column-rule-color: transparent; column-rule-color: hsla(0, 100%, 50%, 0.6);  /* Global values */ column-rule-color: inherit; column-rule-color: initial; column-rule-color: revert; column-rule-color: unset; 

The column-rule-color property is specified as a single <color> value.

Values

<color>

The color of the rule that separates columns.

Formal definition

Initial valuecurrentcolor
Applies tomulticol elements
Inheritedno
Computed valuecomputed color
Animation typea color

Formal syntax

<color>

where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )

where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

Setting a blue column rule

HTML
<p>This is a bunch of text split into three columns.    The `column-rule-color` property is used to change    the color of the line that is drawn between columns.    Don't you think that's wonderful?</p> 
CSS
p {   column-count: 3;   column-rule-style: solid;   column-rule-color: blue; } 
Result

Specifications

Specification
CSS Multi-column Layout Module Level 2 # crc

See also

The <color> data type Other color-related properties: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, and caret-color Applying color to HTML elements using CSS

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Me
Random CSS Property

::backdrop

The ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.
::backdrop css reference