How to Add Transparent Inside Border Using CSS

Here full code of how to add transparent area inside borders using CSS.

HTML Code:

<div class="inner-border">
    Transparent Inside Border
</div>

CSS Code:

body {
    background: url(http://farm7.static.flickr.com/6181/6145664051_a2a18a2d0a_b.jpg);
    font-family: sans-serif; 
    text-align: center;
}
body > div { 
    background: #000; 
    color: #fff; 
    margin: 50px;
    padding: 15px;
    position: relative; 
}
.pseudo:before { 
    border: 5px solid #000; 
    content: ""; 
    position: absolute; 
    top: -10px; 
    bottom: -10px; 
    left: -10px; 
    right: -10px; 
}

.clip {
    background-clip: content-box;
    border: 5px solid #000; 
    padding: 5px;
    margin: 40px;
}

Click to See result in jsFiddle