<!DOCTYPE html>
<style>
.test {
width: 100px;
height: 100px;
-webkit-writing-mode: vertical-rl;
-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>