CSS column-rule-style Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Layout and base styles */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #f7fafc;
    color: #1a202c;
    padding: 24px;
}

/* Grid of examples */
.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.box {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.1);
}

h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
}

/* Column container  -  common settings */
.columns {
    column-count: 2;
    column-gap: 20px;
    column-rule-width: 6px;      /* width of the rule between columns */
    column-rule-color: #2b6cb0;  /* default color */
    height: 160px;
    overflow: auto;
    padding-right: 6px;
}

.columns p {
    margin: 0;
    line-height: 1.5;
}

/* Different rule styles demonstrated */
.columns.solid {
    column-rule-style: solid;
}

.columns.dashed {
    column-rule-style: dashed;
    column-rule-color: #d53f8c;
}

.columns.dotted {
    column-rule-style: dotted;
    column-rule-color: #2f855a;
    column-rule-width: 4px;
}

.columns.double {
    column-rule-style: double;
    column-rule-color: #d69e2e;
    column-rule-width: 8px;
}
</style></head><body><div class="wrapper">
    <div class="box">
        <h3>column-rule-style: solid</h3>
        <div class="columns solid">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,
                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat
                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum
                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.
            </p>
        </div>
    </div>

    <div class="box">
        <h3>column-rule-style: dashed</h3>
        <div class="columns dashed">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,
                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat
                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum
                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.
            </p>
        </div>
    </div>

    <div class="box">
        <h3>column-rule-style: dotted</h3>
        <div class="columns dotted">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,
                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat
                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum
                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.
            </p>
        </div>
    </div>

    <div class="box">
        <h3>column-rule-style: double</h3>
        <div class="columns double">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,
                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat
                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum
                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.
            </p>
        </div>
    </div>
</div></body></html>