CSS column-rule-style Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The column-rule-style property in CSS is used to specify the style of the rule (line) between columns in a multi-column layout.

This property allows web developers to define how the dividing line between columns should appear, providing options such as solid, dotted, dashed, and more. Using this property can enhance the visual separation of content in a multi-column layout.

💡 Syntax

The syntax for the column-rule-style property is straightforward. It is applied to an element that has a multi-column layout.

Syntax

Copied

element {
  column-rule-style: style;
}

Here, style can be any valid border-style value such as none, solid, dotted, dashed, double, groove, ridge, inset, or outset.

🎛️ Default Value

The default value of the column-rule-style property is none, which means no rule (line) will be displayed between columns.

🏠 Property Values

Value	Description
none	No rule is displayed between columns.
solid	Displays a solid, single line between columns.
dotted	Displays a dotted line between columns.
dashed	Displays a dashed line between columns.
double	Displays a double line between columns.
groove	Displays a 3D grooved line between columns.
ridge	Displays a 3D ridged line between columns.
inset	Displays a 3D inset line between columns.
outset	Displays a 3D outset line between columns.

📄 Example

In this example, we'll set a solid rule style between columns.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS column-rule-style Example</title>
  <style>
    .columns {
      column-count: 3;
      column-gap: 20px;
      column-rule-style: solid;
      column-rule-width: 2px;
      column-rule-color: black;
    }
  </style>
</head>
<body>
  <h1>Column Rule Style Example</h1>
  <div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.</p>
    <p>Fusce tincidunt, nisl eget venenatis vestibulum, nisl mauris luctus mi, a bibendum est dui non metus. Nulla facilisi. Phasellus ullamcorper, est vel laoreet suscipit, mauris ex facilisis libero, et dictum mi lorem et nunc.</p>
    <p>Sed fermentum, arcu sit amet volutpat malesuada, erat nulla facilisis urna, ac scelerisque ligula magna vel leo. Integer bibendum, sapien eu vestibulum fermentum, risus purus accumsan odio, eu porttitor mi arcu eu urna.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-rule-style property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The column-rule-style property is a useful tool for web developers looking to enhance the appearance of multi-column layouts.

By customizing the style of the rule between columns, you can create visually appealing and well-organized content. Experiment with different styles to find the one that best suits your design needs.