Is it possible to make a 2px border in a content box?
4 answers
One way using pseudo-elements :
http://jsfiddle.net/1x2chmee/1/
.box {
width: 200px;
height: 100px;
background-color: orange;
position: relative;
padding: 16px;
}
.box:after {
content: "";
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
border: 2px solid #fff;
}
This method is a little verbose, but well supported by browsers and flexible.
Another example with a few extra parameters: http://jsfiddle.net/1x2chmee/2/
+7
source to share
You can also use CSS property outline
:
.yourDiv {
height:300px;
width:500px;
background-color: #E9967A;
outline-style: solid;
outline-offset: -10px;
outline-width: 3px;
outline-color: #fff;
}
The spell is here: http://jsfiddle.net/H7KdA/39/
More on this CSS property: http://www.w3schools.com/css/css_outline.asp
Browser support: http://caniuse.com/#feat=outline
Edit : IE9 and IE10 don't support outline-offset
:
+4
source to share
<div class="lol"> <span class="title">This is a title</span> </div>
.lol{
width: 300px;
height:200px;
background: #ff8800;
position: relative;
}
.lol:after{
content:'';
width: 280px;
height:180px;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
border:3px solid #fff;
}
.title{
display: block;
text-align: center;
color: #fff;
font-family: verdana;
font-size: 1.3em;
padding-top: 20%;
}
0
source to share
You can use specific CSS3 shadow tag rules.
-moz-box-shadow: inset #B3B3B3 0 -1px 0 0;
-webkit-box-shadow: inset #B3B3B3 0 -1px 0 0;
box-shadow: inset #B3B3B3 0 -1px 0 0;
original post: How to render inner border using CSS3?
-1
source to share