CSS column-rule-width Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.wrap {
  max-width: 960px;
  margin: 40px auto;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #1a202c;
}

h2 {
  margin: 0 0 16px 0;
  font-size: 20px;
}

.multi-column {
  column-count: 3;
  column-gap: 24px;
  column-rule-style: solid;
  column-rule-color: #2b6cb0;
  column-rule-width: 6px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 8px;
}

.multi-column p {
  margin: 0 0 16px 0;
  line-height: 1.6;
}
</style></head><body><div class='wrap'>
  <h2>Column Rule Width Example</h2>
  <div class='multi-column'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros at urna tincidunt feugiat. Integer sit amet arcu sed nisl aliquet facilisis. Curabitur hendrerit, lacus vel pulvinar bibendum, magna arcu gravida lacus, sed tincidunt erat lorem non lorem.</p>
    <p>Phasellus faucibus, arcu ut volutpat consequat, ipsum sapien cursus diam, non posuere mauris lectus eu odio. Sed quis velit vel lectus cursus tristique. Proin non risus sit amet nisl tincidunt luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
    <p>Suspendisse potenti. Integer vitae nibh at sapien convallis placerat. Aliquam erat volutpat. Aenean ac elit nec mi volutpat luctus. In hac habitasse platea dictumst.</p>
  </div>
</div></body></html>