<!DOCTYPE html>
<style>
.test {
width: 100px;
height: 100px;
}
.left { border-left: 50px solid blue; }
.right { border-right: 50px solid blue; }
.test div {
width: 100px;
height: 50px;
background-color: orange;
position: relative;
top: 25px;
}
</style>
<p>There should be a 50px blue border to the left of an orange rectangle:</p>
<div class="test left"><div></div></div>
<p>There should be a 50px blue border to the right of an orange rectangle:</p>
<div class="test right"><div></div></div>