Add borders around blog elements #2 - stitched effect

This is a neat CSS effect we found at design shack that gives the appearance of a stitched seam around the edge and adds a drop shadow for a realistic look. Here we have adapted it to fit with the TypePad template.

Stitched border around the banner:

#banner-header, #banner-description { color: #fff; font-size: 14px; margin-left: 30px; } #banner a { color: #fff; font-size: 35px; font-weight: bold; font-family: Helvetica, sans-serif; } #banner-inner { position: relative; top: 0; padding: 18px 0px; border: 0; /*stitching*/ outline: 1px dashed #98abb9; outline-offset: -10px; background-color: #556068; /*shadow*/ -webkit-box-shadow: 2px 2px 2px #000; -moz-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000; } #banner { height: auto; }

Stitched border around the post titles:

h3.entry-header { outline: 1px dashed #98abb9; outline-offset: -5px; background-color: #556068; -webkit-box-shadow: 2px 2px 2px #000; -moz-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000; padding: 10px 15px; color: #fff; margin-bottom: 5px; } .entry-header a { color: #fff;}

Stitched border around the sidebar titles:

h2.module-header { outline: 1px dashed #98abb9; outline-offset: -5px; background-color: #556068; -webkit-box-shadow: 2px 2px 2px #000; -moz-box-shadow: 2px 2px 2px #000; box-shadow: 2px 2px 2px #000; padding: 10px; color: #fff; margin-bottom: 5px; } .module-header a { color: #fff; }