html - CSS solution for pattern outside of text -

i trying style setup section of website pattern running each side of pieces of text. see screenshot took psd file here --> http://screencast.com/t/84rclrdszt red arrows pointing areas in question finding difficult solve.

any idea how go this?

here starting with:

<div class="box">     <h2>some text here</h2> </div> 

and css:

.box {   width:400px;   height:200px;   text-align:center;   background:yellow; }  h2:after,h2:before{   content:"";   border:5px double purple; } 

here fiddle --> http://jsfiddle.net/herrloop/g63lb/1/

as can see, stripes vertical, instead of horizontal can see in initial screenshot.

this isn't quite perfect , requires set fixed width on before/after elements (best can think of use javascript if responsive required), here goes:

h2{     display:inline-block;     vertical-align:middle; } h2:after, h2:before{     content:"";     margin:0px 20px;     border:1px solid #000;     border-left: 0px;     border-right:0px;     height:5px;     width:50px;     display:inline-block;     vertical-align:middle; } 

http://jsfiddle.net/dacrosby/g63lb/2/

edit

this a little bit more responsive, still gets kind of cut off @ small sizes , looks disproportional @ others:

.box {     width:50%;     overflow:hidden; } h2{     display:inline-block;     vertical-align:middle;     width:100%;     white-space:nowrap; } h2:after, h2:before{     content:"";     margin:0px 20px;     border:1px solid #000;     border-left: 0px;     border-right:0px;     height:5px;     width:20%;     display:inline-block;     vertical-align:middle; } 

http://jsfiddle.net/dacrosby/g63lb/3/