Multiple borders :after :before

Multiple borders :after :before

by JordanBlount

HTML

<div id="box"></div>

CSS

body { background: #d2d1d0; }

#box {
    background: #f4f4f4;
    border: 1px solid #bbbbbb;
    width: 200px;
    height: 200px;
    margin: 60px auto;
    position: relative;
}

#box:before {
    border: 1px solid white;
    content: '';
    width: 198px;
    height: 198px;
    position: absolute;
}

#box:after {
    content: '';
    position: absolute;
    width: 196px;
    height: 196px;
    border: 1px solid #bbbbbb;
    left: 1px; top: 1px;
}