Pseudo element to create a border

by Matthew Day

HTML

<div id="outer">
    <div id="inner">
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
</div>

CSS

#outer {
    position:fixed;
    top: 6px;
    left: 6px;
    z-index:10;
    padding:20px;
    background:#eee;
}

#outer:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    border:4px solid #000;
}

#outer:after {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:-4px;
    left:-4px;
    right:-4px;
    bottom:-4px;
    border:4px solid #ff0000;
}