Question

How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?

Answer 1

You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.

HTML

<div class="frame"><img src="../img/logo.png"></div>

CSS

.frame {
    display:inline-block;
    position:relative;
    margin:20px;
    z-index:5;
    padding:10px;
    background:#376b90;
}
.frame:before {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:0;
    top:0;
    right:0;
    bottom:0;
    box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
    position:absolute;
    content:".";
    display:block;
    font-size:0;
    color:transparent;
    /* Change left, right, top, bottom, and box-shadow to position */
    left:5px;
    top:5px;
    right:5px;
    bottom:5px;
    box-shadow:inset 0 0 3px 2px black;
}

Example Usage

• Both shadows outside
• One shadow inside, one shadow outside
• Both shadows inside
• Two inset shadows, one outset shadow, and custom background – Requested by OP
• Inset borders – Replicating https://stackoverflow.com/a/10904061/526741
• Variable length content