Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator
html

What is the CSS column-rule property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The column-rule property in CSSCascade Style Sheets sets or defines the style, color, and width of the rule between the columns.

It is a shorthand property of the following:

  • column-rule-width

  • column-rule-style

  • column-rule-color

Syntax


column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

Property values

  • column-rule-width: Its default value is medium. It defines the width of the column rule.

  • column-rule-style: Its default value is none. It sets or defines the style of the rule between multiple columns.

  • column-rule-color: Its default value is the color of the element. It defines the color of the rule between multiple columns.

  • initial: This sets the value to its default value.

  • inherit: This inherits property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language & CSS code to demonstrate the use of the column-rule property:

Explanation

In this example, we have set the column-rule property. We can see that the column is separated by a dotted line which is violet, and the size of one dot is set to be 5px.

We can also change the style, color, and width according to our own choice.

RELATED TAGS

css
community creator
html

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring