dashed border

by austinpray

HTML

<div class="box">
     <h1>Apple Pie</h1>

    <p>Is it possible to do a design like this (the bordered edges) without using images, but using CSS only..? One of our designers has fired it to me and I think it might be a photoshop border, but I want to avoid using an image if possible.</p>
</div>

CSS

.box {
    position:relative;
    width:19em;
    height:19em;
    margin:2em;
    z-index:1;
    color:gray;
}
h1 {
    color:red;
}
.box:after {
    background:#fdfdfd;
    content:" ";
    position:absolute;
    z-index:-1;
    top:-.5em;
    left:-.5em;
    width:19em;
    height:19em;
}
.box:before {
    position:absolute;
    z-index:-2;
    top:-1em;
    left:-1em;
    width:20em;
    height:20em;
    background:#000;
    content:" ";
    background-color:#f1f1f1;
    background-image: linear-gradient(transparent, transparent 1px), linear-gradient(transparent 1px, transparent 2px), linear-gradient(rgba(0, 0, 0, .3) 2px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .3) 2px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
}