column-rule
Quick Summary for column-rule
The column-rule shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
Code Usage for column-rule
column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue;  /* Global values */ column-rule: inherit; column-rule: initial; column-rule: revert; column-rule: unset; 
More Details for column-rule

column-rule

The column-rule shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.

It is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color.

Note: As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties).

Syntax

column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue;  /* Global values */ column-rule: inherit; column-rule: initial; column-rule: revert; column-rule: unset; 

The column-rule property is specified as one, two, or three of the values listed below, in any order.

Values

<'column-rule-width'>

Is a <length> or one of the three keywords, thin, medium, or thick. See border-width for details.

<'column-rule-style'>

See border-style for possible values and details.

<'column-rule-color'>

Is a <color> value.

Formal definition

Initial valueas each of the properties of the shorthand:column-rule-width: mediumcolumn-rule-style: nonecolumn-rule-color: currentcolor
Applies tomulticol elements
Inheritedno
Computed valueas each of the properties of the shorthand:column-rule-color: computed colorcolumn-rule-style: as specifiedcolumn-rule-width: the absolute length; 0 if the column-rule-style is none or hidden
Animation typeas each of the properties of the shorthand:column-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a length

Formal syntax

<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Examples

Example 1

/* Same as "medium dotted currentcolor" */ p.foo { column-rule: dotted; }  /* Same as "medium solid blue" */ p.bar { column-rule: solid blue; }  /* Same as "8px solid currentcolor" */ p.baz { column-rule: solid 8px; }  p.abc { column-rule: thick inset blue; } 

Example 2

HTML
<p class="content-box">   This is a bunch of text split into three columns.   Take note of how the `column-rule` property is used   to adjust the style, width, and color of the rule   that appears between the columns. </p> 
CSS
.content-box {   padding: 0.3em;   background: #ff7;   column-count: 3;   column-rule: inset 2px #33f; } 
Result

Specifications

Specification
CSS Multi-column Layout Module Level 2 # column-rule

See also

Multiple-column Layout column-rule-style column-rule-width column-rule-color

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
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk
Random CSS Property

paint-order

The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.
paint-order css reference