Shadow Box CSS

Creates a nice border shadow on any single element with only the use of :before

by Donald White

HTML

<div class="shadowBox">Shadow box</div>

CSS

body {
    background: url(http://www.noqta.it/dromoscopio/img/pattern_43.gif);
    }

::before, ::after { content: ""; }

.shadowBox {
    border: 1px solid #ccc;
    background: #fefefe;
    margin: 20px;
    padding: 10px;
    text-align: center;
    height: 200px;
    
    /* important CSS */
    border-radius: 5px;
    position: relative;
    }

    .shadowBox::after {
        background: #000;
        opacity: 0.5;

        /* important CSS */
        position: absolute;  
        
        /**
         * Radius = parent's 5px + this padding
         * Set the top & left to be padding * -1.
         */
        padding: 10px;
        border-radius: 15px;
        top: -10px;
        left: -10px;
        width: 100%;
        height: 100%;
        z-index: -1;
        }