CSS border within a border? - html

Question

Is it possible to do a CSS border within a border?
Here is what I'm trying to do: screenshot
I would like to avoid extra html elements and also avoid using images because of retina devices. If only I could put a CSS outline on only one side of the element I would be golden, but this doesn't seem to be possible.
Edit:
Here's what I've ended up with from the many excellent solutions that were posted - thank you!
http://jsfiddle.net/kisabelle/9umMr/1/
HTML
<footer>
<p>Example</p>
</footer>
CSS
footer{
border-top: 15px solid #393734;
position: relative;
}
footer:after{
content:"";
border-top: 2px #989593 dotted;
position:absolute;
top: -8px;
left:0;
width:100%;
height:0;
}
Using the pseudo-element :after to add a second border (instead of box-shadow) allows support in IE8 and up.
See the jsfiddle for a second example in which you can control the space between the dots in the dotted border using the CSS content attribute instead of a border.

Answer 1

A couple of options:
Use border + outline
Use pseudo elements
Use multiple box-shadows
Use border-image
Googling any of those brings up loads of resources
Now that I've seen the screen grab, I reckon a combination of border top plus some box-shadows is your answer: http://jsfiddle.net/ne9nm/
Edit: Update the JSFiddle to show two possible solutions; one using box-shadows, and one using a pseudo element.
The HTML:
<div id="example-1">Example 1</div>
<div id="example-2">Example 2</div>
The CSS:
div {
background:rgb(100, 150, 100);
width:100px;
height:100px;
padding:30px;
margin:20px;
}
#example-1 {
border-top:1px white dotted;
box-shadow: inset 0 5px 0 grey, 0 -5px 0 grey
}
#example-2 {
border-top:10px solid grey;
position:relative;
}
#example-2:before {
content:"";
position:absolute;
width:100%;
height:0;
border-top:1px white dotted;
top:-5px;
left:0;
}

Answer 2

you can use box-shadow from css with inset and :after or before like this
Demo :http://jsfiddle.net/uXpaX/1/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
figure:after{
position:absolute;
top:-2px;
left:0;
height:1px;
width:100%;
content:'';
border-top:4px dashed white;
}
Or you can just use box-shadow and border
Demo:http://jsfiddle.net/uXpaX/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
html
<figure>
<figcaption>Coustomer Care</figcaption>
<menu type=list>
<li>Billing</li>
<li>Shipping & Tracking</li>
<li>Returns & Exchanges</li>
<li>Products & Sizing</li>
<li>Contact</li>
</menu>
</figure>
or use an other box-shadow trick like this
Demo:http://jsfiddle.net/uXpaX/2/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: black;
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black,inset 0 100em rgb(140, 179, 140);
}