| <!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> |