CSS column-rule-color Enhance Multi-Column Layouts

column-rule-color: <color>;

<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>

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

<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>

.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 */
}

<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>

.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;
}

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

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

<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>

.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 */
}

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

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

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

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

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