Custom border box markup

by dipish

HTML

<div class="fancybox">
    <p class="t"></p><p class="b"></p><p class="l"></p><p class="r"></p>
    <p class="tl"></p><p class="tr"></p><p class="bl"></p><p class="br"></p>
    <div class="payload">
        <p>HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.</p>
        <p>Static positioned elements are not affected by the top, bottom, left, and right properties.</p>
        <p>A relative positioned element is positioned relative to its normal position.</p>
        <p>The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.</p>
        <p>An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is &lt;html&gt;.</p>
        <p>Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.</p>
        <p>When elements are positioned outside the normal flow, they can overlap other elements.</p>
        <p>The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).</p>
        <p>An element can have a positive or negative stack order</p>
        <p>Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.</p>
        <p style="margin-top: 10px;">Extracted from <a href="http://www.w3schools.com/css/css_positioning.asp">W3Schools article</a>.</p>
    </div>
</div>

CSS

body {
    background: #C8EEF1;
}

.fancybox {
    position: relative;
    padding: 10px;
    width: 400px;
}

    .fancybox .t {
        position: absolute;
        top: 0;
        left: 10px;
        right: 10px;
        background: yellow;
        height: 10px;
    }
    
    .fancybox .b {
        position: absolute;
        bottom: 0;
        left: 10px;
        right: 10px;
        background: red;
        height: 10px;
    }
    
    .fancybox .l {
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        background: blue;
        width: 10px;
    }
    
    .fancybox .r {
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        background: green;
        width: 10px;
    }

    .fancybox .tl {
        position: absolute;
        top: 0;
        left: 0;
        background: brown;
        width: 10px;
        height: 10px;
    }

    .fancybox .tr {
        position: absolute;
        top: 0;
        right: 0;
        background: magenta;
        width: 10px;
        height: 10px;
    }

    .fancybox .bl {
        position: absolute;
        bottom: 0;
        left: 0;
        background: cyan;
        width: 10px;
        height: 10px;
    }

    .fancybox .br {
        position: absolute;
        bottom: 0;
        right: 0;
        background: lightgray;
        width: 10px;
        height: 10px;
    }
    
    .fancybox .payload {
        
    }
        .fancybox .payload p {
            margin: 2px 0 2px 0;
            text-indent: 15px;
        }