Multiple borders :after :before

Multiple borders :after :before

by Reusablecode

HTML

<div id="box">

    <FORM>
    
        <label >First Name</label>
        <input name="FirstName" type="text">
        
        
    </FORM>
    
</div>

CSS

body { background: #d2d1d0; }

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

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

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