Transparent Inside Border
<div class="inner-border">
Transparent Inside Border
</div>.inner-border {
background: #000;
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
Great snippet. Thank you, Chris.
You could do the same with:
or am i mistaking myself?
What is the use of this code. I mean to say where should i apply this technique.
Actually, what Stijn said works. You just have to set the offset the negative of the outline width.
Jon, using the outline property works great in Webkit-based browsers. Firefox however does not render it perfectly and IE 9 renders it like a normal border.
Using Chris’ method works across all of these browsers.