javascript - Adding left and right borders to slick slider -

javascript - Adding left and right borders to slick slider -

i have slick slider , trying add together dashed border left , right of content.

here's plunker: http://plnkr.co/edit/4iejdtelkfuo8ecqlpuh?p=preview

i have 2 issues:

the right border not showing there not plenty padding between border , text

how can prepare above?

html:

<div class="container"> <div class="grid-wrap"> <div class="grid-col one-eighth"> <div class="your-class"> <div class="text-box">test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1</div> <div class="text-box">test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2</div> <div class="text-box">test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3</div> <div class="text-box">test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4</div> </div> </div> </div> </div>

css:

.text-box { border-left: 1px dashed white; border-right: 1px dashed white; }

image of border right issue:

i corrected plunk. http://plnkr.co/edit/alurwdlyicnlw3bbn1vq?p=preview

i added padding .text-box class

.text-box { border-left: 1px dashed white; border-right: 1px dashed white; padding: 30px; }

i changed grid-wrap width 70% + 6px (all borders combined)

.grid-wrap { width: calc(70% + 6px); }

like able alter padding , able see borders. maintain in mind if alter border width must alter + xp.

javascript html css html5 css3