Search code examples
htmlcsswebdropshadow

Stack two borders with drop-shadows?

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

Solution

  • 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