html - CSS sprite with pseudo classes in all corners -

i found this codepen using sprite add corners:

with code:

.lol-promo:before, .lol-promo:after {   background: url("http://s.cdpn.io/800/ornaments-sprite.png") no-repeat;   content: "";   height: 40px;   position: absolute;   top: 0; left: 0;   width: 95px; }  .lol-promo:after {   background-position: -95px 0;   left: auto; right: 0; } 

but in codepen example using top corners, how can add bottom corners too, simple div? tried things repeating div:after part not working. think simple not getting point.

thanks in advance

you can make use of css3 border-image property.

you define how image sliced , width of border. the slice rule takes 4 values each defining top, right, bottom , left corners of box respectively. way, don't need pseudo-elements.

give markup: <section class="lol-promo"></section>..

all need css:

.lol-promo {     ...     border-image: url('//s.cdpn.io/800/ornaments-sprite.png');     border-image-slice: 40 96 40 96;     border-image-width: auto; } 

the slice based off image referenced in question. other image, need tweak values depending on how want border appear.

example snippet:

.lol-promo {      height: 120px; width: 320px; margin: 16px; padding: 16px;      background-color: rgba(0,0,128,0.1);      border-image: url('//s.cdpn.io/800/ornaments-sprite.png');      border-image-slice: 40 96 40 96;      border-image-width: auto;  }

<section class="lol-promo">      <h2>header</h2>      <p>lorem ipsum</p>  </section>

example fiddle: http://jsfiddle.net/abhitalks/05lx7eea/