<style>
    div.outer { border-width: 0; border-color: green; border-style: solid; background-color: red; width: 100px; height: 100px; -webkit-column-gap: 0; -webkit-columns: 2; }
    div.outer div { background-color: green; }
</style>

<div class="outer" style="-webkit-writing-mode: horizontal-bt; border-top-width: 50px;">
    <div style="height: 100px;"></div>
    <div style="height: 100px; -webkit-column-break-before: always;"></div>
</div>

<div class="outer" style="-webkit-writing-mode: horizontal-tb; border-bottom-width: 50px;">
    <div style="height: 100px;"></div>
    <div style="height: 100px; -webkit-column-break-before: always;"></div>
</div>

<div class="outer" style="-webkit-writing-mode: vertical-rl; border-left-width: 50px;">
    <div style="width: 100px;"></div>
    <div style="width: 100px; -webkit-column-break-before: always;"></div>
</div>

<div class="outer" style="-webkit-writing-mode: vertical-lr; border-right-width: 50px;">
    <div style="width: 100px;"></div>
    <div style="width: 100px; -webkit-column-break-before: always;"></div>
</div>