CSS3 "Sewn Patch" Look (Using :before)

This is one way to deliver a "sewn" look to your element. A quick z-index fix allows you to still click links inside of the element. This also degrades the best.

by Travis

HTML

<div id="patch">
    <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum</p>

    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit. Duis non felis neque. Pellentesque eleifend arcu a elit adipiscing porttitor molestie mi iaculis. Aliquam ac nisi at ligula ullamcorper tempor ut et diam.</p>
</div>

CSS

body {background:#ccc;}
p {line-height:1.5em;}
#patch {width:230px; margin:10px; padding:20px; position:relative; background:#fff; border-radius:4px; box-shadow:0px 0px 1px 1px #666; z-index:1;}
#patch:before {content: ""; position: absolute; top: 3px; bottom: 3px; left :3px; right: 3px; border: 1px dashed #ccc; border-radius:4px; z-index:-1;}