rick@tillitsdone.com

+66824564755

Scroll to discover

CSS column-rule-color Enhance Multi-Column Layouts

Learn how to use CSS column-rule-color to customize column rules in multi-column layouts.

Explore various color formats and global values for enhanced visual appeal.

Introduction

The column-rule-color CSS property sets the color of the line that separates columns in a multi-column layout.

Syntax

column-rule-color: <color>;

You can specify the color using named colors, hex codes, RGB, RGBA, HSL, and HSLA. You can also use global values like inherit, initial, revert, revert-layer, and unset.

Examples

Setting a Blue Column Rule

HTML:

<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS:

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}

Result:

The text will be divided into three columns, with a blue line separating each column.

Using Different Color Formats

HTML:

<div class="example1">
  <p>
    This is a paragraph with a red column rule.
  </p>
</div>

<div class="example2">
  <p>
    This is a paragraph with a green column rule.
  </p>
</div>

<div class="example3">
  <p>
    This is a paragraph with a blue column rule.
  </p>
</div>

CSS:

.example1 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: red; /* Named color */
}

.example2 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: #00ff00; /* Hex code */
}

.example3 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: rgb(0, 0, 255); /* RGB */
}

Result:

Each paragraph will have a different column rule color based on the specified color format.

Using Global Values

HTML:

<div class="example4">
  <p>
    This is a paragraph with an inherited column rule color.
  </p>
</div>

<div class="example5">
  <p>
    This is a paragraph with the initial column rule color.
  </p>
</div>

<div class="example6">
  <p>
    This is a paragraph with the unset column rule color.
  </p>
</div>

CSS:

.example4 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: inherit;
}

.example5 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: initial;
}

.example6 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: unset;
}

Result:

The column rule color will be determined by the global values specified.

Using RGBA for Transparency

HTML:

<div class="example7">
  <p>
    This is a paragraph with a semi-transparent column rule color.
  </p>
</div>

CSS:

.example7 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: rgba(0, 0, 255, 0.5); /* RGBA */
}

Result:

The column rule color will be semi-transparent blue.

Using HSL and HSLA Colors

HTML:

<div class="example9">
  <p>
    This is a paragraph with an HSL column rule color.
  </p>
</div>

<div class="example10">
  <p>
    This is a paragraph with an HSLA column rule color.
  </p>
</div>

CSS:

.example9 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: hsl(120, 100%, 50%); /* Green in HSL */
}

.example10 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green in HSLA */
}

Result:

The first paragraph will have a green column rule color, while the second paragraph will have a semi-transparent green column rule color.

Inheriting Column Rule Color

HTML:

<div class="parent">
  <div class="child">
    <p>
      This is a paragraph with an inherited column rule color.
    </p>
  </div>
</div>

CSS:

.parent {
  column-rule-color: red;
}

.child p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: inherit; /* Inherit from parent */
}

Result:

The column rule color for the paragraph will be inherited from the parent element, resulting in a red column rule color.

Using Initial Value

HTML:

<div class="example11">
  <p>
    This is a paragraph with the initial column rule color.
  </p>
</div>

CSS:

.example11 p {
  column-count: 2;
  column-rule-style: solid;
  column-rule-color: initial; /* Reset to default value */
}

Result:

The column rule color will be reset to its default value, which is currentcolor.

Browser Support

The column-rule-color property is supported by all major web browsers:

Google Chrome: Supported since version 50.0.
Microsoft Edge: Supported since version 12.0.
Internet Explorer: Supported since version 10.0.
Mozilla Firefox: Supported since version 52.0.
Opera: Supported since version 37.0.
Safari: Supported since version 9.0.

column-rule: Shorthand for setting the width, style, and color of the column rule.
```
column-rule: 2px solid blue;
```
column-rule-width: Specifies the width of the column rule.
```
column-rule-width: 2px;
```
column-rule-style: Defines the style of the column rule.
```
column-rule-style: dashed;
```
columns: Shorthand for setting the number of columns and their width.
```
columns: 3 200px;
```
column-count: Specifies the number of columns.
```
column-count: 3;
```
column-width: Specifies the optimal width of the columns.
```
column-width: 200px;
```
column-gap: Specifies the gap between columns.
```
column-gap: 20px;
```
column-span: Allows an element to span across all columns.
```
column-span: all;
```