CSS column-rule property

Property values

column-rule-width

mediumDefault

medium value represents medium sized border for the top side. thin<medium<thick

column-rule-width: medium;

Try it { }

thin

thin value defines thin line border for the top side.

column-rule-width: thin;

Try it { }

thick

thick value defines a thick line border for the top side.

column-rule-width: thick;

Try it { }

length

10

lenght defines the line width of border for the top side. The used units might be px, in, em, pt.

column-rule-width: 10px;

Try it { }

column-rule-style

noneDefault

There is no style. In this case, the color and width of border are also ignored i.e. 0px border.

column-rule-style: none;

Try it { }

hidden

It is same as 'none' but resolve to different results for the border-collapse property in tables.

column-rule-style: hidden;

Try it { }

dashed

The right border consists of a series of square shaped dashes.

column-rule-style: dashed;

Try it { }

dotted

The right border consists of a series of round dots.

column-rule-style: dotted;

Try it { }

solid

The right border consists of a solid line.

column-rule-style: solid;

Try it { }

double

The right border consists of two lines. The total border-width equals to the two lines and space between them.

column-rule-style: double;

Try it { }

ridge

The content seems to be coming out of the canvas. The half outer side of border is darker than border-block-end-color.

column-rule-style: ridge;

Try it { }

groove

The content seems to be going into the canvas. The half inner side of border is darker than border-block-end-color.

column-rule-style: groove;

Try it { }

inset

The color of any two sides is darker than border-block-end-color. It can be observed only when all the sides are visible.

column-rule-style: inset;

Try it { }

outset

The color of any two sides is darker than border-block-end-color. It can be observed only when all the sides are visible

column-rule-style: outset;

Try it { }

column-rule-color

currentColorDefault

currentColor keyword represents the same color for the border as of text color.

column-rule-color: currentColor;

Try it { }

color-name

The following demo represents skyblue color for border.

column-rule-color: skyblue;

Try it { }

rgb value

#000000

It represents rgb value of a color. The hexadecimal value of red color for the border is given below.

column-rule-color: rgb(255,0,0);

Try it { }

hexadecimal value

#000000

It represents hexadecimal notation of red color. The hexadecimal notation of blue color for the border is given below.

column-rule-color: #0000ff;

Try it { }