jsFiddle

• Run again
• Edit this fiddle

• Result
• HTML
• CSS

<div class="relative">
    xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx<br/>xxxxx

    <div class="corner left-top"></div>
    <div class="corner right-top"></div>
    <div class="corner left-bottom"></div>
    <div class="corner right-bottom"></div>
    <div class="frame top"></div>
    <div class="frame right"></div>
    <div class="frame bottom"></div>
    <div class="frame left"></div>
</div>

.relative {
    position:relative;
    width:100px;
    background-color:#6E919A;
    padding:20px;
}
.corner {
    position:absolute;
    width:15px; height:15px; overflow:hidden;
    background-color:#9BC9D1;
}
.corner.left-top { left:0; top:0; }
.corner.right-top { right:0; top:0; }
.corner.left-bottom { left:0; bottom:0; }
.corner.right-bottom { right:0; bottom:0; }

.frame {
    position:absolute; overflow:hidden;
    background-color:#455A5F;
}
.frame.top { height:15px; top:0; right:15px; left:15px; }
.frame.right { width:15px; right:0; top:15px; bottom:15px; }
.frame.bottom { height:15px; bottom:0; left:15px; right:15px; }
.frame.left { width:15px; left:0; top:15px; bottom:15px; }