2-D Border / Stacked Border

Achieve a 2-D Border look using two different colors, pseudo-elements, & a relatively positioned parent.

by kpowz

HTML

<p class="vr vr-variation1" >
    all of the fun.<br/>
    all of the lights.      
</p>

 <p class="vr vr-variation2" >
     all of the fun.<br/>
     all of the lights.      
</p>

CSS

*{
    background-color: #eee;
}

p{
    width: 50%
}
.vr {   
    border-right: 1px solid #999999;
    position:relative;
}
.vr-variation1::before{
   position: absolute;
    height:100%; 
    width:100%; 
   content: '';
   border-right: 2px solid #ffffff;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
}
.vr-variation2::after{
    position: absolute;
    height:100%; 
    width:100%; 
   content: '';
   border-right: 2px solid #ffffff;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
}