CSS or Cascading Style Sheets is a language used to describe the presentation of a document written in HTML or XML. It is used to style web pages and make them look visually appealing. One of the properties in CSS is the column-rule-style property. This property is used to set the style of the rule between columns in a multi-column layout.
The column-rule-style property is a sub-property of the column-rule property. The column-rule property is used to set the width, style, and color of the rule between columns. The column-rule-style property is used to set the style of the rule. The possible values for this property are:
none: No rule is displayed between columns.hidden: A hidden rule is displayed between columns.dotted: A dotted rule is displayed between columns.dashed: A dashed rule is displayed between columns.solid: A solid rule is displayed between columns.double: A double rule is displayed between columns.groove: A 3D grooved rule is displayed between columns.ridge: A 3D ridged rule is displayed between columns.inset: A 3D inset rule is displayed between columns.outset: A 3D outset rule is displayed between columns.Let's take a look at some code examples:
In this example, we will set the column-rule-style property to solid:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: solid;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to solid, which means that a solid rule is displayed between columns.
In this example, we will set the column-rule-style property to dashed:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: dashed;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to dashed, which means that a dashed rule is displayed between columns.
In this example, we will set the column-rule-style property to double:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: double;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to double, which means that a double rule is displayed between columns.
In this example, we will set the column-rule-style property to groove:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: groove;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to groove, which means that a 3D grooved rule is displayed between columns.
In this example, we will set the column-rule-style property to ridge:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: ridge;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to ridge, which means that a 3D ridged rule is displayed between columns.
In this example, we will set the column-rule-style property to inset:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: inset;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to inset, which means that a 3D inset rule is displayed between columns.
In this example, we will set the column-rule-style property to outset:
<div class="multi-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum.</p>
</div>
.multi-column {
column-count: 3;
column-rule-style: outset;
}
In this example, we have a multi-column layout with three columns. The column-rule-style property is set to outset, which means that a 3D outset rule is displayed between columns.
These are just a few examples of how the column-rule-style property can be used. There are many other ways to use this property to create different effects.
The column-rule-style property is a useful property in CSS that is used to set the style of the rule between columns in a multi-column layout. It can be used to create different effects and make a web page look visually appealing.