CSS column-rule Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 32 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

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

This property is a shorthand for setting the width, style, and color of the rule between columns.

It helps in enhancing the visual separation between columns, making the content easier to read and more aesthetically pleasing.

💡 Syntax

The syntax for the column-rule property is as follows:

Syntax

Copied

element {
  column-rule: width style color;
}

🎛️ Default Value

The default value for the column-rule property is:

Syntax

Copied

column-rule: medium none currentcolor;

This means that by default, there is no rule between columns.

🏠 Property Values

width: Can be any length value (e.g., thin, medium, thick, 5px).
style: Determines the style of the rule and can be one of the following:
- none
- solid
- dashed
- dotted
- double
- groove
- ridge
- inset
- outset
color: Can be any valid color value (e.g., red, #ff0000, rgb(255, 0, 0)).

📄 Example

In this example, we will create a three-column layout with a solid black rule between the 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 Example</title>
  <style>
    .columns {
      column-count: 3;
      column-gap: 20px;
      column-rule: 5px solid black;
    }
  </style>
</head>
<body>
  <h1>Three-Column Layout with Column Rule</h1>
  <div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-rule 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 property is a versatile tool for adding visual distinction between columns in a multi-column layout.

By adjusting the width, style, and color of the column rule, you can enhance the readability and design of your content. Experiment with different values to see how they can improve the appearance of your multi-column layouts.