CSS column-rule-color Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

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

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

💡 Syntax

The syntax for the column-rule-color property is straightforward. You can specify a color using any valid CSS color value.

Syntax

Copied

element {
  column-rule-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the column-rule-color property is the color of the text in the element (currentcolor).

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
currentcolor	The current value of the color property.

📄 Example

In this example, we'll change the column rule color to blue.

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-color Example</title>
  <style>
    .columns {
      column-count: 3;
      column-gap: 20px;
      column-rule-style: solid;
      column-rule-width: 2px;
      column-rule-color: blue;
    }
  </style>
</head>
<body>
  <h1>Multi-Column Layout with Custom Column Rule Color</h1>
  <div class="columns">
    <p>This is some sample text that will be split into multiple columns. The rule color between columns is set to blue.</p>
    <p>Each paragraph is part of the same container but displayed across different columns.</p>
    <p>The column-rule-color property makes the separation between columns visually clear.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-rule-color 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-color property is a useful tool for web developers looking to enhance the readability and design of multi-column layouts.

By customizing the color of the column rule, you can create visually distinct and appealing column separations that align with your overall design scheme. Experiment with different colors to see how this property can improve the look and feel of your web projects.