Sunday, August 18, 2013

How to Add Transparent Inside Border Using CSS

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


Disqus Comments