<div class="imgfield effect1 effect2 effect3"> </div>

.imgfield { background: url(someimage.jpg); ... width, height etc. }
.effect1 { outline: yellow 2px solid; outline-offset: -4px; }
.effect2 { outline: red 2px solid; outline-offset: -8px; }
.effect3 { outline: blue 2px solid; outline-offset: -12px; }

.effect {
        height: 200px;
        width: 200px;
        outline: 1px solid #000;
        position:relative;/* pick as reference for pseudo absolute */
        -moz-box-sizing:border-box; /* keep box within size given */
        box-sizing:border-box;
    }
/* size pseudo within from coordonates */
    .effect:before {
        content:"";
        top:2px;
        left:2px;
        right:2px;
        bottom:2px;
        border: green 2px solid;
        position: absolute;
    }
    .effect:after {
        content:"";
        top:6px;
        left:6px;
        right:6px;
        bottom:6px;
        border: red 2px solid;
        position: absolute;
    }

.effect {
    height: 200px;
    width: 200px;
    outline: 1px solid #000;
}

.effect:before {
    content: "";
    height: 200px;
    width: 200px;
    outline: green 2px solid;
    outline-offset: -4px;
    display: block;
    position: absolute;
}

.effect:after {
    content: "";
    display: block;
    height: 200px;
    width: 200px;
    outline: red 2px solid;
    outline-offset: -8px;
    position: absolute;
}