<!DOCTYPE html>
<style>
    .test {
        width: 100px;
        height: 100px;
        -webkit-writing-mode: vertical-lr;
        -webkit-columns: 2;
        -webkit-column-rule: 50px solid orange;
        -webkit-column-gap: 50px;
    }

    .before { border-block-start: 50px solid blue; }
    .after { border-block-end: 50px solid blue; }

    .test div { width: 200px; }
</style>
<p>There should be a 50px blue border to the left of an orange rectangle:</p>
<div class="test before"><div></div></div>
<p>There should be a 50px blue border to the right of an orange rectangle:</p>
<div class="test after"><div></div></div>