CSS or Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML or XML. CSS is used to style web pages and make them look visually appealing. One of the CSS properties that can be used to style web pages is the column-rule property.
The column-rule property is used to set the style, width, and color of the rule between columns in a multi-column layout. It is used in conjunction with the column-count and column-width properties to create multi-column layouts. The column-rule property can be applied to the parent element that contains the columns or to individual columns within the parent element.
The syntax for the column-rule property is as follows:
column-rule: column-rule-width column-rule-style column-rule-color;
The column-rule-width property sets the width of the rule between columns. It can be set in pixels, ems, or percentages. The default value is medium.
The column-rule-style property sets the style of the rule between columns. It can be set to solid, dotted, dashed, double, groove, ridge, inset, or outset. The default value is none.
The column-rule-color property sets the color of the rule between columns. It can be set to any valid CSS color value. The default value is the color of the text.
Here are some examples of how the column-rule property can be used:
In this example, we will create a multi-column layout with a solid red rule between the columns:
<div style="column-count: 3; column-rule: 2px solid red;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum.</p>
</div>
The output of the above code will be a multi-column layout with three columns and a solid red rule between the columns:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.
Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum.
In this example, we will create a multi-column layout with a dotted blue rule between the columns:
<div style="column-count: 2; column-rule: 1px dotted blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum.</p>
</div>
The output of the above code will be a multi-column layout with two columns and a dotted blue rule between the columns:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.
Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum.
In this example, we will create a multi-column layout with individual column rules:
<div style="column-count: 3;">
<p style="column-rule: 2px solid red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p style="column-rule: 1px dotted blue;">Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p style="column-rule: 3px double green;">Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum.</p>
</div>
The output of the above code will be a multi-column layout with three columns and individual column rules:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.
Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Velit elit bibendum elit, vel bibendum elit elit vel elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum.