Top/Bottom expanding border DIV

http://stackoverflow.com/q/16725430/1454806

by Troy Alford

HTML

<div class="border">
    <div class="content">
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
        Lorem ipsum, etc...<br/>
    </div>
</div>

CSS

.border { 
    position: relative; 
    width: 234px;
    background: #fff url(https://i.stack.imgur.com/5ozby.jpg) top center repeat-y;
}
.border:before, .border:after {
    position: absolute; 
    content: '';
    display: inline-block;
    height: 53px; width: 234px;
}
.border:before {
    top: 0; left: 0;
    background: transparent url(https://i.stack.imgur.com/3JTJl.jpg) top center no-repeat;
}
.border:after {
    bottom: 0; left: 0;
    background: transparent url(https://i.stack.imgur.com/3f85b.jpg) bottom center no-repeat;
}
.border > .content { 
    background: transparent;
    position: relative;
    padding: 13px;
    z-index: 1;
}