column-rule

The column-rule property is shorthand for all column rule properties.

Formal Syntax

column-rule = <gap-rule-list> | <gap-auto-rule-list> <gap-rule-list> = <gap-rule-or-repeat># <gap-auto-rule-list> = <gap-rule-or-repeat>#? , <gap-auto-repeat-rule> , <gap-rule-or-repeat>#?

Initial value: see individual properties
Applies to: see individual properties
Inherited: no
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties

See specification

JavaScript Access

// Access via element.style element.style.columnRule = "value";

Browser Support

standard | MDN · Spec

Feature	Chrome	Firefox	Safari	Edge
column-rule	50	52	9	12
dashed	1	3.5	3	12
dotted	1	3.5	3	12
double	1	3.5	3	12
groove	1	3.5	3	12
hidden	1	3.5	3	12
inset	1	3.5	3	12
medium	1	3.5	3	12
none	1	3.5	3	12
outset	1	3.5	3	12
ridge	1	3.5	3	12
solid	1	3.5	3	12
thick	1	3.5	3	12
thin	1	3.5	3	12
transparent	1	3.5	3	12

Related Properties

align-content
align-items
align-self
anchor-name
anchor-scope
break-after
break-before
break-inside
caption-side
clear
column-count
column-fill
column-gap
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
contain
container
container-name
container-type
content
content-visibility
display
empty-cells
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
justify-content
justify-items
justify-self
order
overflow
overflow-anchor
overflow-block
overflow-inline
overflow-wrap
overflow-x
overflow-y
place-content
place-items
place-self
position-anchor
position-area
position-try
position-try-fallbacks
position-try-order
position-visibility
resize
row-gap
table-layout
text-overflow
visibility
z-index
reading-flow 🧪
reading-order 🧪
align-tracks 🚧
block-ellipsis 🚧
block-step 🚧
block-step-align 🚧
block-step-insert 🚧
block-step-round 🚧
block-step-size 🚧
bookmark-label 🚧
bookmark-level 🚧
bookmark-state 🚧
column-height 🚧
column-rule-break 🚧
column-rule-outset 🚧
column-wrap 🚧
continue 🚧
float-defer 🚧
float-offset 🚧
float-reference 🚧
flow-from 🚧
flow-into 🚧
grid-column-gap 🚧
grid-gap 🚧
grid-row-gap 🚧
inline-sizing 🚧
item-cross 🚧
item-direction 🚧
item-flow 🚧
item-pack 🚧
item-tolerance 🚧
item-track 🚧
item-wrap 🚧
justify-tracks 🚧
region-fragment 🚧
row-rule 🚧
row-rule-break 🚧
row-rule-color 🚧
row-rule-outset 🚧
row-rule-style 🚧
row-rule-width 🚧
rule 🚧
rule-break 🚧
rule-color 🚧
rule-outset 🚧
rule-overlap 🚧
rule-style 🚧
rule-width 🚧
wrap-after 🚧
wrap-before 🚧
wrap-flow 🚧
wrap-inside 🚧
wrap-through 🚧
page-break-after 🗑️
page-break-before 🗑️
page-break-inside 🗑️