CSS column-rule-width Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

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

This property helps in enhancing the visual separation between columns, making the content more readable and aesthetically pleasing.

💡 Syntax

The syntax for the column-rule-width property is straightforward and allows for various units to define the width.

Syntax

Copied

element {
  column-rule-width: value;
}

Here, value can be a length value such as px, em, rem, etc.

🎛️ Default Value

The default value of the column-rule-width property is medium. This corresponds to a medium width as defined by the browser's default styling.

🏠 Property Values

Value	Description
thin	A thin rule width.
medium	A medium rule width (default).
thick	A thick rule width.
length	A specific width value, such as 2px, 0.1em, etc.

📄 Example

In this example, we'll define a rule width of 5px 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-width Example</title>
  <style>
    .columns {
      column-count: 3;
      column-rule-width: 5px;
      column-rule-style: solid;
      column-rule-color: black;
    }
  </style>
</head>
<body>
  <h1>Columns with Custom Rule Width</h1>
  <div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat aliquam velit. Phasellus iaculis neque purus sodales ultricies.</p>
    <p>Integer vehicula mauris libero, a consequat metus consequat eget. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur blandit mollis lacus.</p>
    <p>Phasellus ullamcorper ipsum rutrum nunc. Cras ultricies mi eu turpis hendrerit fringilla. Fusce convallis metus id felis luctus adipiscing. Praesent ac sem eget est egestas volutpat.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-rule-width 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-width property is a useful tool for web developers looking to create visually appealing multi-column layouts.

By customizing the width of the rule between columns, you can enhance the readability and design of your content. Experiment with different widths and see how this property can improve the look and feel of your web projects.