<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?
This has rendering errors in some browsers and also does not allow for border-radius effects
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.
hello,
Thanks, worked great…
.inner-border {
background: #fff;
color: #626262;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 4px solid #e7e7e7;
content: “”;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
}
You should try this. Best solution i found :
-webkit-box-shadow: 0px 0px 0px 1px #fff;
box-shadow: 0px 0px 0px 1px #fff;
It doesn’t adds any extra pixels.
The solution given by “CHRIS COYIER” is very useful when we don’t want the border on all sides. The best solution.
using outline and box-shadow we cannot chose sides.
Look at the below link.
http://codepen.io/manichandra/pen/dMwKMg