CSS column-rule Tutorial

CSS column-rule

The CSS column-rule property is used to set the style, color, and width of the rule between columns in a multi-column layout.

Syntax:


.column-rule {
  column-rule: style color width;
}

style can be one of the following values:

color specifies the color of the rule, and width determines the width of the rule.

Example:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec libero lectus. Ut convallis tristique consequat.

Sed ultricies, velit ac vehicula tempor, ante nisl finibus justo, eget condimentum velit turpis sit amet mauris.

In hac habitasse platea dictumst. Aenean venenatis ante libero, in porttitor mi posuere nec.

In the above example, we have created a multi-column layout with 3 columns. The column rule is set to a red dotted line with a width of 2px.

By using the CSS column-rule property, you can customize the appearance of the rule between columns in your multi-column layout.